Chore: Moved from Untyped to Stongly Typed forms.

overlord/src/app/incentive/incentive.component.ts

@@ -1,10 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import {
-  UntypedFormArray,
-  UntypedFormBuilder,
-  UntypedFormControl,
-  UntypedFormGroup,
-} from '@angular/forms';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
@@ -31,7 +26,15 @@ import { IncentiveDataSource } from './incentive-datasource';
 export class IncentiveComponent implements OnInit {
   public incentiveObservable = new BehaviorSubject<Incentive[]>([]);
   dataSource: IncentiveDataSource = new IncentiveDataSource(this.incentiveObservable);
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    date: FormControl<Date>;
+    incentives: FormArray<
+      FormGroup<{
+        points: FormControl<number>;
+      }>
+    >;
+  }>;
+
   voucher: Voucher = new Voucher();
   account: Account = new Account();
   accBal: AccountBalance | null = null;
@@ -41,18 +44,17 @@ export class IncentiveComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: UntypedFormBuilder,
     private dialog: MatDialog,
     private toaster: ToasterService,
     public auth: AuthService,
     private ser: VoucherService,
   ) {
-    this.form = this.fb.group({
-      date: '',
-      incentives: this.fb.array([]),
+    this.form = new FormGroup({
+      date: new FormControl(new Date(), { nonNullable: true }),
+      incentives: new FormArray<FormGroup<{ points: FormControl<number> }>>([]),
     });
     // Listen to Date Change
-    (this.form.get('date') as UntypedFormControl).valueChanges
+    this.form.controls.date.valueChanges
       .pipe(map((x) => moment(x).format('DD-MMM-YYYY')))
       .subscribe((x) => {
         if (x !== this.voucher.date && !this.voucher.id) {
@@ -74,17 +76,12 @@ export class IncentiveComponent implements OnInit {
 
   loadVoucher(voucher: Voucher) {
     this.voucher = voucher;
-    (this.form.get('date') as UntypedFormControl).setValue(
-      moment(this.voucher.date, 'DD-MMM-YYYY').toDate(),
-    );
-    this.form.setControl(
-      'incentives',
-      this.fb.array(
-        this.voucher.incentives.map((x) =>
-          this.fb.group({
-            points: x.points,
-          }),
-        ),
+    this.form.controls.date.setValue(moment(this.voucher.date, 'DD-MMM-YYYY').toDate());
+    this.voucher.incentives.forEach((x) =>
+      this.form.controls.incentives.push(
+        new FormGroup({
+          points: new FormControl(x.points, { nonNullable: true }),
+        }),
       ),
     );
     this.dataSource = new IncentiveDataSource(this.incentiveObservable);
@@ -104,28 +101,20 @@ export class IncentiveComponent implements OnInit {
   less(row: Incentive, i: number) {
     if (row.points >= 1) {
       row.points -= 1;
-      ((this.form.get('incentives') as UntypedFormArray).get(`${i}`) as UntypedFormGroup).setValue({
-        points: `${row.points}`,
+      this.form.controls.incentives.controls[i].setValue({
+        points: row.points,
       });
     }
   }
 
   change(row: Incentive, i: number) {
-    row.points = +(
-      ((this.form.get('incentives') as UntypedFormArray).get(`${i}`) as UntypedFormGroup).get(
-        'points',
-      ) as UntypedFormControl
-    ).value;
-    ((this.form.get('incentives') as UntypedFormArray).get(`${i}`) as UntypedFormGroup).setValue({
-      points: `${row.points}`,
-    });
+    row.points = this.form.controls.incentives.controls[i].value.points!;
+    this.form.controls.incentives.controls[i].setValue({ points: row.points });
   }
 
   more(row: Incentive, i: number) {
     row.points += 1;
-    ((this.form.get('incentives') as UntypedFormArray).get(`${i}`) as UntypedFormGroup).setValue({
-      points: `${row.points}`,
-    });
+    this.form.controls.incentives.controls[i].setValue({ points: row.points });
   }
 
   amount(row: Incentive) {
@@ -176,9 +165,10 @@ export class IncentiveComponent implements OnInit {
   getVoucher(): Voucher {
     const formModel = this.form.value;
     this.voucher.date = moment(formModel.date).format('DD-MMM-YYYY');
-    const array = this.form.get('incentives') as UntypedFormArray;
+    const array = this.form.controls.incentives;
+
     this.voucher.incentives.forEach((item, index) => {
-      item.points = array.controls[index].value.points;
+      item.points = array.controls[index].value.points!;
     });
     return this.voucher;
   }