Chore: Moved from Untyped to Stongly Typed forms.

overlord/src/app/closing-stock/closing-stock.component.ts

@@ -1,10 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import {
-  UntypedFormArray,
-  UntypedFormBuilder,
-  FormControl,
-  UntypedFormGroup,
-} from '@angular/forms';
+import { FormGroup, FormArray, FormControl } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSelectChange } from '@angular/material/select';
@@ -34,8 +29,18 @@ export class ClosingStockComponent implements OnInit {
   @ViewChild(MatSort, { static: true }) sort?: MatSort;
   info: ClosingStock = new ClosingStock();
   dataSource: ClosingStockDataSource = new ClosingStockDataSource(this.info.items);
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    date: FormControl<Date>;
+    costCentre: FormControl<string | null>;
+    stocks: FormArray<
+      FormGroup<{
+        physical: FormControl<number>;
+        costCentre: FormControl<string | undefined>;
+      }>
+    >;
+  }>;
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+
   displayedColumns = [
     'product',
     'group',
@@ -51,7 +56,6 @@ export class ClosingStockComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: UntypedFormBuilder,
     private toCsv: ToCsvService,
     private dialog: MatDialog,
     private toaster: ToasterService,
@@ -59,10 +63,12 @@ export class ClosingStockComponent implements OnInit {
     private ser: ClosingStockService,
   ) {
     this.costCentres = [];
-    this.form = this.fb.group({
-      date: '',
-      costCentre: '',
-      stocks: this.fb.array([]),
+    this.form = new FormGroup({
+      date: new FormControl(new Date(), { nonNullable: true }),
+      costCentre: new FormControl<string | null>(null),
+      stocks: new FormArray<
+        FormGroup<{ physical: FormControl<number>; costCentre: FormControl<string | undefined> }>
+      >([]),
     });
   }
 
@@ -75,15 +81,12 @@ export class ClosingStockComponent implements OnInit {
         date: moment(this.info.date, 'DD-MMM-YYYY').toDate(),
         costCentre: this.info.costCentre.id,
       });
-      this.form.setControl(
-        'stocks',
-        this.fb.array(
-          this.info.items.map((x) =>
-            this.fb.group({
-              physical: '' + x.physical,
-              costCentre: x.costCentre?.id,
-            }),
-          ),
+      this.info.items.forEach((x) =>
+        this.form.controls.stocks.push(
+          new FormGroup({
+            physical: new FormControl(x.physical, { nonNullable: true }),
+            costCentre: new FormControl(x.costCentre?.id, { nonNullable: true }),
+          }),
         ),
       );
       this.dataSource = new ClosingStockDataSource(this.info.items, this.paginator, this.sort);
@@ -113,9 +116,9 @@ export class ClosingStockComponent implements OnInit {
   getClosingStock(): ClosingStock {
     const formModel = this.form.value;
     this.info.date = moment(formModel.date).format('DD-MMM-YYYY');
-    const array = this.form.get('stocks') as UntypedFormArray;
+    const array = this.form.controls.stocks;
     this.info.items.forEach((item, index) => {
-      item.physical = +array.controls[index].value.physical;
+      item.physical = +array.controls[index].value.physical!;
       item.costCentre =
         array.controls[index].value.costCentre == null
           ? undefined
@@ -130,7 +133,7 @@ export class ClosingStockComponent implements OnInit {
 
     return new ClosingStock({
       date: moment(formModel.date).format('DD-MMM-YYYY'),
-      costCentre: new CostCentre({ id: formModel.costCentre }),
+      costCentre: new CostCentre({ id: formModel.costCentre! }),
     });
   }