Chore: Moved from Untyped to Stongly Typed forms.

overlord/src/app/account/account-detail/account-detail.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -17,7 +17,15 @@ import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dial
 })
 export class AccountDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    code: FormControl<number | string>;
+    name: FormControl<string | null>;
+    type: FormControl<any>;
+    isActive: FormControl<boolean>;
+    isReconcilable: FormControl<boolean>;
+    costCentre: FormControl<string | null>;
+  }>;
+
   accountTypes: AccountType[] = [];
   costCentres: CostCentre[] = [];
   item: Account = new Account();
@@ -26,17 +34,16 @@ export class AccountDetailComponent implements OnInit, AfterViewInit {
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private ser: AccountService,
   ) {
-    this.form = this.fb.group({
-      code: { value: '', disabled: true },
-      name: '',
-      type: '',
-      isActive: '',
-      isReconcilable: '',
-      costCentre: '',
+    this.form = new FormGroup({
+      code: new FormControl<string | number>({ value: 0, disabled: true }, { nonNullable: true }),
+      name: new FormControl<string | null>(null),
+      type: new FormControl<any>(''),
+      isActive: new FormControl<boolean>(true, { nonNullable: true }),
+      isReconcilable: new FormControl<boolean>(false, { nonNullable: true }),
+      costCentre: new FormControl<string | null>(null),
     });
   }
 
@@ -62,7 +69,7 @@ export class AccountDetailComponent implements OnInit, AfterViewInit {
       type: this.item.type,
       isActive: this.item.isActive,
       isReconcilable: this.item.isReconcilable,
-      costCentre: this.item.costCentre.id,
+      costCentre: this.item.costCentre.id!,
     });
   }
 
@@ -113,11 +120,11 @@ export class AccountDetailComponent implements OnInit, AfterViewInit {
 
   getItem(): Account {
     const formModel = this.form.value;
-    this.item.name = formModel.name;
+    this.item.name = formModel.name!;
     this.item.type = formModel.type;
-    this.item.isActive = formModel.isActive;
-    this.item.isReconcilable = formModel.isReconcilable;
-    this.item.costCentre.id = formModel.costCentre;
+    this.item.isActive = formModel.isActive!;
+    this.item.isReconcilable = formModel.isReconcilable!;
+    this.item.costCentre.id = formModel.costCentre!;
     return this.item;
   }
 }