Chore: Moved from Untyped to Stongly Typed forms.

overlord/src/app/payment/payment.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, OnDestroy, ViewChild } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -7,7 +7,7 @@ import { Hotkey, HotkeysService } from 'angular2-hotkeys';
 import { round } from 'mathjs';
 import * as moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 
 import { AuthService } from '../auth/auth.service';
 import { Account } from '../core/account';
@@ -37,7 +37,17 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('dateElement', { static: true }) dateElement?: ElementRef;
   public journalObservable = new BehaviorSubject<Journal[]>([]);
   dataSource: PaymentDataSource = new PaymentDataSource(this.journalObservable);
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    date: FormControl<Date>;
+    paymentAccount: FormControl<string>;
+    paymentAmount: FormControl<number>;
+    addRow: FormGroup<{
+      account: FormControl<string | null>;
+      amount: FormControl<string>;
+    }>;
+    narration: FormControl<string>;
+  }>;
+
   paymentAccounts: Account[] = [];
   paymentJournal: Journal = new Journal();
   voucher: Voucher = new Voucher();
@@ -51,7 +61,6 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: UntypedFormBuilder,
     private dialog: MatDialog,
     private hotkeys: HotkeysService,
     private toaster: ToasterService,
@@ -62,29 +71,26 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
     private accountSer: AccountService,
   ) {
     this.account = null;
-    this.form = this.fb.group({
-      date: '',
-      paymentAccount: '',
-      paymentAmount: { value: '', disabled: true },
-      addRow: this.fb.group({
-        account: '',
-        amount: '',
+    this.form = new FormGroup({
+      date: new FormControl(new Date(), { nonNullable: true }),
+      paymentAccount: new FormControl('', { nonNullable: true }),
+      paymentAmount: new FormControl({ value: 0, disabled: true }, { nonNullable: true }),
+      addRow: new FormGroup({
+        account: new FormControl(''),
+        amount: new FormControl('', { nonNullable: true }),
       }),
-      narration: '',
+      narration: new FormControl('', { nonNullable: true }),
     });
     this.accBal = null;
     // Listen to Account Autocomplete Change
-    this.accounts = (
-      (this.form.get('addRow') as UntypedFormControl).get('account') as UntypedFormControl
-    ).valueChanges.pipe(
-      startWith(null),
+    this.accounts = this.form.controls.addRow.controls.account.valueChanges.pipe(
       map((x) => (x !== null && x.length >= 1 ? x : null)),
       debounceTime(150),
       distinctUntilChanged(),
       switchMap((x) => (x === null ? observableOf([]) : this.accountSer.autocomplete(x))),
     );
     // Listen to Payment Account Change
-    (this.form.get('paymentAccount') as UntypedFormControl).valueChanges.subscribe((x) =>
+    this.form.controls.paymentAccount.valueChanges.subscribe((x) =>
       this.router.navigate([], {
         relativeTo: this.route,
         queryParams: { a: x },
@@ -153,11 +159,11 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
     [this.paymentJournal] = this.voucher.journals.filter((x) => x.debit === -1);
     this.form.setValue({
       date: moment(this.voucher.date, 'DD-MMM-YYYY').toDate(),
-      paymentAccount: this.paymentJournal.account.id,
+      paymentAccount: this.paymentJournal.account.id!,
       paymentAmount: this.paymentJournal.amount,
       addRow: {
         account: '',
-        amount: 0,
+        amount: '',
       },
       narration: this.voucher.narration,
     });
@@ -174,10 +180,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   addRow() {
-    const amount = this.math.parseAmount(
-      (this.form.get('addRow') as UntypedFormControl).value.amount,
-      2,
-    );
+    const amount = this.math.parseAmount(this.form.value.addRow?.amount!, 2);
     const debit = 1;
     if (this.account === null || amount <= 0) {
       return;
@@ -206,10 +209,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   resetAddRow() {
-    (this.form.get('addRow') as UntypedFormControl).reset({
-      account: null,
-      amount: null,
-    });
+    this.form.controls.addRow.reset({ account: null, amount: '' });
     this.account = null;
     this.accBal = null;
     setTimeout(() => {
@@ -226,7 +226,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
       Math.abs(journals.map((x) => x.amount).reduce((p, c) => p + c, 0)),
       2,
     );
-    (this.form.get('paymentAmount') as UntypedFormControl).setValue(this.paymentJournal.amount);
+    this.form.controls.paymentAmount.setValue(this.paymentJournal.amount);
   }
 
   editRow(row: Journal) {
@@ -234,7 +234,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
       width: '750px',
       data: {
         journal: { ...row },
-        date: moment((this.form.get('date') as UntypedFormControl).value).format('DD-MMM-YYYY'),
+        date: moment(this.form.value.date).format('DD-MMM-YYYY'),
       },
     });
 
@@ -305,7 +305,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
     const formModel = this.form.value;
     this.voucher.date = moment(formModel.date).format('DD-MMM-YYYY');
     this.paymentJournal.account.id = formModel.paymentAccount;
-    this.voucher.narration = formModel.narration;
+    this.voucher.narration = formModel.narration!;
     return this.voucher;
   }
 
@@ -341,7 +341,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
   accountSelected(event: MatAutocompleteSelectedEvent): void {
     const account = event.option.value;
     this.account = account;
-    const date = moment((this.form.get('date') as UntypedFormControl).value).format('DD-MMM-YYYY');
+    const date = moment(this.form.value.date).format('DD-MMM-YYYY');
     this.accountSer.balance(account.id as string, date).subscribe((v) => {
       this.accBal = v;
     });