Chore: Moved from Untyped to Stongly Typed forms.

overlord/src/app/journal/journal-dialog.component.ts

@@ -1,9 +1,9 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 
 import { Account } from '../core/account';
 import { AccountBalance } from '../core/account-balance';
@@ -18,26 +18,29 @@ import { MathService } from '../shared/math.service';
 })
 export class JournalDialogComponent implements OnInit {
   accounts: Observable<Account[]>;
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    debit: FormControl<number>;
+    account: FormControl<string | null>;
+    amount: FormControl<string>;
+  }>;
+
   account: Account = new Account();
   accBal: AccountBalance | null = null;
 
   constructor(
     public dialogRef: MatDialogRef<JournalDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: { journal: Journal; date: string },
-    private fb: UntypedFormBuilder,
     private math: MathService,
     private accountSer: AccountService,
   ) {
-    this.form = this.fb.group({
-      debit: '1',
-      account: '',
-      amount: '',
+    this.form = new FormGroup({
+      debit: new FormControl(1, { nonNullable: true }),
+      account: new FormControl(''),
+      amount: new FormControl('', { nonNullable: true }),
     });
     this.accBal = null;
     // Setup Account Autocomplete
-    this.accounts = (this.form.get('account') as UntypedFormControl).valueChanges.pipe(
-      startWith(null),
+    this.accounts = this.form.controls.account.valueChanges.pipe(
       map((x) => (x !== null && x.length >= 1 ? x : null)),
       debounceTime(150),
       distinctUntilChanged(),
@@ -47,9 +50,9 @@ export class JournalDialogComponent implements OnInit {
 
   ngOnInit() {
     this.form.setValue({
-      debit: `${this.data.journal.debit}`,
-      account: this.data.journal.account,
-      amount: this.data.journal.amount,
+      debit: this.data.journal.debit,
+      account: this.data.journal.account.name,
+      amount: `${this.data.journal.amount}`,
     });
     this.account = this.data.journal.account;
   }
@@ -68,7 +71,7 @@ export class JournalDialogComponent implements OnInit {
 
   accept(): void {
     const formValue = this.form.value;
-    const amount = this.math.journalAmount(formValue.amount, +formValue.debit);
+    const amount = this.math.journalAmount(formValue.amount, formValue.debit!);
     this.data.journal.debit = amount.debit;
     this.data.journal.account = this.account;
     this.data.journal.amount = amount.amount;