Strict done!!

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

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
@@ -17,7 +17,7 @@ import { MathService } from '../shared/math.service';
 export class IssueDialogComponent implements OnInit {
   batches: Observable<Batch[]>;
   form: FormGroup;
-  batch: Batch;
+  batch: Batch = new Batch();
 
   constructor(
     public dialogRef: MatDialogRef<IssueDialogComponent>,
@@ -30,7 +30,13 @@ export class IssueDialogComponent implements OnInit {
       batch: '',
       quantity: '',
     });
-    this.listenToBatchAutocompleteChange();
+    // Listen to Batch Autocomplete Change
+    this.batches = (this.form.get('batch') as FormControl).valueChanges.pipe(
+      startWith(''),
+      debounceTime(150),
+      distinctUntilChanged(),
+      switchMap((x) => this.batchSer.autocomplete(this.data.date, x)),
+    );
   }
 
   ngOnInit() {
@@ -41,18 +47,8 @@ export class IssueDialogComponent implements OnInit {
     this.batch = this.data.inventory.batch;
   }
 
-  listenToBatchAutocompleteChange(): void {
-    const control = this.form.get('batch');
-    this.batches = control.valueChanges.pipe(
-      startWith(''),
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => this.batchSer.autocomplete(this.data.date, x)),
-    );
-  }
-
-  displayFn(batch?: Batch): string | undefined {
-    return batch ? batch.name : undefined;
+  displayFn(batch?: Batch): string {
+    return batch ? batch.name : '';
   }
 
   batchSelected(event: MatAutocompleteSelectedEvent): void {