Chore: Moved from Untyped to Stongly Typed forms.

overlord/src/app/issue/issue-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 } from 'rxjs';
-import { debounceTime, distinctUntilChanged, startWith, switchMap } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 
 import { Batch } from '../core/batch';
 import { BatchService } from '../core/batch.service';
@@ -17,23 +17,27 @@ import { MathService } from '../shared/math.service';
 })
 export class IssueDialogComponent implements OnInit {
   batches: Observable<Batch[]>;
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    batch: FormControl<Batch | string | null>;
+    quantity: FormControl<string>;
+  }>;
+
   batch: Batch = new Batch();
 
   constructor(
     public dialogRef: MatDialogRef<IssueDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: { inventory: Inventory; date: string },
-    private fb: UntypedFormBuilder,
     private math: MathService,
     private batchSer: BatchService,
   ) {
-    this.form = this.fb.group({
-      batch: '',
-      quantity: '',
+    this.form = new FormGroup({
+      batch: new FormControl<Batch | string | null>(null),
+      quantity: new FormControl<string>('', { nonNullable: true }),
     });
     // Listen to Batch Autocomplete Change
-    this.batches = (this.form.get('batch') as UntypedFormControl).valueChanges.pipe(
-      startWith(''),
+    this.batches = this.form.controls.batch.valueChanges.pipe(
+      map((x) => (x instanceof Batch ? x.name : x)),
+      map((x) => (x !== null && x.length >= 1 ? x : '')),
       debounceTime(150),
       distinctUntilChanged(),
       switchMap((x) => this.batchSer.autocomplete(this.data.date, x)),
@@ -43,7 +47,7 @@ export class IssueDialogComponent implements OnInit {
   ngOnInit() {
     this.form.setValue({
       batch: this.data.inventory.batch,
-      quantity: this.data.inventory.quantity,
+      quantity: `${this.data.inventory.quantity}`,
     });
     this.batch = this.data.inventory.batch as Batch;
   }