Format date fields without patch form

src/app/collections/individual-collection-sheet/individual-collection-sheet.component.html

@@ -28,7 +28,7 @@
       <mat-form-field fxFlex="98%">
         <mat-label>Repayment date</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
-          formControlName="transactionDate" required>
+          formControlName="transactionDate">
         <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #transactionDatePicker></mat-datepicker>
         <mat-error *ngIf="collectionSheetForm.controls.transactionDate.hasError('required')">
@@ -58,7 +58,7 @@
 
 </mat-card>
 
-<div class="showCollectionSheet">
+<div class="showcollectionsheet">
 
   <div class="container" *ngIf="isCollapsed">
 

src/app/collections/individual-collection-sheet/individual-collection-sheet.component.scss

@@ -5,18 +5,18 @@
   .margin-v {
     margin: 1em 0;
   }
-  
+
   .margin-b {
     margin: 0 0 1em 0;
   }
-  
+
   .margin-t {
     margin-top: 1em;
   }
 
 }
 
-.showCollectionSheet {
+.showcollectionsheet {
   .container {
     max-width: 73rem;
   }

src/app/collections/individual-collection-sheet/individual-collection-sheet.component.ts

@@ -6,7 +6,6 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Services Import */
 import { CollectionsService } from '../collections.service';
@@ -21,6 +20,7 @@ import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
 
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Individual Collection Sheet
@@ -82,7 +82,7 @@ export class IndividualCollectionSheetComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder.
    * @param {OrganizationService} collectionsService Organization Service.
    * @param {Route} route Route.
-   * @param {DatePipe} datePipe Date Pipe to format date.
+   * @param {Dates} dateUtils Date Utils to format date.
    * @param {Dialog} dialog Dialog component.
    * @param {Router} router Router for navigation.
    * @param {SettingsService} settingsService Settings Service
@@ -90,7 +90,7 @@ export class IndividualCollectionSheetComponent implements OnInit {
   constructor(private formBuilder: FormBuilder,
               private collectionsService: CollectionsService,
               private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               public dialog: MatDialog,
               private router: Router,
               private settingsService: SettingsService) {
@@ -280,12 +280,11 @@ export class IndividualCollectionSheetComponent implements OnInit {
    * Searches collection sheet data
    */
   previewCollectionSheet() {
-    // TODO: Update once language and date settings are setup
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const collectionSheet = {
       ...this.collectionSheetForm.value,
-      'transactionDate': this.datePipe.transform(this.collectionSheetForm.value.transactionDate, dateFormat),
+      transactionDate: this.dateUtils.formatDate(this.collectionSheetForm.value.transactionDate, dateFormat),
       dateFormat,
       locale
     };
@@ -308,7 +307,6 @@ export class IndividualCollectionSheetComponent implements OnInit {
    * Submit the data with all the payments data
    */
   submit() {
-    // TODO: Update once language and date settings are setup
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     this.bulkDisbursementTransactionsData['bulkRepaymentTransactions'] = this.bulkRepaymentTransactions;
@@ -316,8 +314,8 @@ export class IndividualCollectionSheetComponent implements OnInit {
     const finalSubmitData = {
       dateFormat,
       locale,
-      actualDisbursementDate: this.datePipe.transform(this.collectionSheetForm.value.transactionDate, dateFormat),
-      transactionDate: this.datePipe.transform(this.collectionSheetForm.value.transactionDate, dateFormat),
+      actualDisbursementDate: this.dateUtils.formatDate(this.collectionSheetForm.value.transactionDate, dateFormat),
+      transactionDate: this.dateUtils.formatDate(this.collectionSheetForm.value.transactionDate, dateFormat),
       bulkDisbursementTransactions: this.bulkDisbursementTransactionsData
     };
     this.collectionsService.executeSaveCollectionSheet(finalSubmitData).subscribe(() => {