Chore: Moved from Untyped to Stongly Typed forms.

overlord/src/app/employee-attendance/employee-attendance.component.html

@@ -90,7 +90,10 @@
           <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
           <mat-cell *matCellDef="let row; let i = index" class="no-bg">
             {{ row.prints }}
-            <mat-icon *ngIf="!attendancesArray.controls[i].pristine">new_releases</mat-icon>
+            <mat-icon
+              *ngIf="!form.controls.attendances.controls[i].controls.attendanceType.pristine"
+              >new_releases</mat-icon
+            >
             <mat-chip-list class="no-bg">
               <mat-chip
                 *ngIf="row.hoursWorked.length"

overlord/src/app/employee-attendance/employee-attendance.component.ts

@@ -1,16 +1,11 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import {
-  UntypedFormArray,
-  UntypedFormBuilder,
-  UntypedFormControl,
-  UntypedFormGroup,
-} from '@angular/forms';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 
 import { AttendanceType } from '../attendance/attendance-type';
 import { AuthService } from '../auth/auth.service';
@@ -35,7 +30,16 @@ export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
     this.employeeAttendanceObservable,
   );
 
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    startDate: FormControl<Date>;
+    finishDate: FormControl<Date>;
+    employee: FormControl<Employee | string | null>;
+    attendances: FormArray<
+      FormGroup<{
+        attendanceType: FormControl<number>;
+      }>
+    >;
+  }>;
 
   info: EmployeeAttendance = new EmployeeAttendance();
   attendanceTypes: AttendanceType[] = [];
@@ -47,22 +51,21 @@ export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: UntypedFormBuilder,
     private dialog: MatDialog,
     private toaster: ToasterService,
     private auth: AuthService,
     private ser: EmployeeAttendanceService,
     private employeeSer: EmployeeService,
   ) {
-    this.form = this.fb.group({
-      startDate: '',
-      finishDate: '',
-      employee: '',
-      attendances: this.fb.array([]),
+    this.form = new FormGroup({
+      startDate: new FormControl(new Date(), { nonNullable: true }),
+      finishDate: new FormControl(new Date(), { nonNullable: true }),
+      employee: new FormControl<Employee | string | null>(null),
+      attendances: new FormArray<FormGroup<{ attendanceType: FormControl<number> }>>([]),
     });
     // Listen to Employee Value Changes
-    this.employees = (this.form.get('employee') as UntypedFormControl).valueChanges.pipe(
-      startWith(null),
+    this.employees = this.form.controls.employee.valueChanges.pipe(
+      map((x) => (x instanceof Employee ? x.name : x)),
       map((x) => (x !== null && x.length >= 1 ? x : null)),
       debounceTime(150),
       distinctUntilChanged(),
@@ -76,21 +79,15 @@ export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
 
       this.info = data.info;
       this.attendanceTypes = data.attendanceTypes;
-      (this.form.get('startDate') as UntypedFormControl).setValue(
-        moment(this.info.startDate, 'DD-MMM-YYYY').toDate(),
-      );
-      (this.form.get('finishDate') as UntypedFormControl).setValue(
-        moment(this.info.finishDate, 'DD-MMM-YYYY').toDate(),
-      );
-      (this.form.get('employee') as UntypedFormControl).setValue(this.info.employee);
-      this.form.setControl(
-        'attendances',
-        this.fb.array(
-          this.info.body.map((x) =>
-            this.fb.group({
-              attendanceType: x.attendanceType.id,
-            }),
-          ),
+      this.form.controls.startDate.setValue(moment(this.info.startDate, 'DD-MMM-YYYY').toDate());
+      this.form.controls.finishDate.setValue(moment(this.info.finishDate, 'DD-MMM-YYYY').toDate());
+      this.form.controls.employee.setValue(this.info.employee);
+      this.form.controls.attendances.reset();
+      this.info.body.forEach((x) =>
+        this.form.controls.attendances.push(
+          new FormGroup({
+            attendanceType: new FormControl(x.attendanceType.id, { nonNullable: true }),
+          }),
         ),
       );
       this.dataSource = new EmployeeAttendanceDataSource(this.employeeAttendanceObservable);
@@ -115,7 +112,7 @@ export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
   }
 
   getClass(index: number) {
-    const array = this.form.get('attendances') as UntypedFormArray;
+    const array = this.form.controls.attendances;
     const id = array.controls[index].value.attendanceType;
     const { name } = this.attendanceTypes.filter((x) => x.id === id)[0];
     return name.toLowerCase().replace(/(\s+\+\s+)|(\s+)/g, '-');
@@ -148,14 +145,10 @@ export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
     const formValue = this.form.value;
     this.info.startDate = moment(formValue.startDate).format('DD-MMM-YYYY');
     this.info.finishDate = moment(formValue.finishDate).format('DD-MMM-YYYY');
-    const array = this.form.get('attendances') as UntypedFormArray;
+    const array = this.form.value.attendances!;
     this.info.body.forEach((item, index) => {
-      item.attendanceType.id = array.controls[index].value.attendanceType;
+      item.attendanceType.id = array[index].attendanceType!;
     });
     return this.info;
   }
-
-  get attendancesArray(): UntypedFormArray {
-    return this.form.get('attendances') as UntypedFormArray;
-  }
 }

overlord/src/app/employee-attendance/employee-attendance.service.ts

@@ -1,4 +1,4 @@
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';