Chore: Moved from Untyped to Stongly Typed forms.

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

@@ -61,7 +61,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/attendance/attendance.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';
@@ -27,7 +22,14 @@ import { AttendanceService } from './attendance.service';
 export class AttendanceComponent implements OnInit {
   public attendanceObservable = new BehaviorSubject<AttendanceItem[]>([]);
   dataSource: AttendanceDataSource = new AttendanceDataSource(this.attendanceObservable);
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    date: FormControl<Date>;
+    attendances: FormArray<
+      FormGroup<{
+        attendanceType: FormControl<number>;
+      }>
+    >;
+  }>;
 
   info: Attendance = new Attendance();
   attendanceTypes: AttendanceType[] = [];
@@ -37,15 +39,14 @@ export class AttendanceComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: UntypedFormBuilder,
     private dialog: MatDialog,
     private toaster: ToasterService,
     private auth: AuthService,
     private ser: AttendanceService,
   ) {
-    this.form = this.fb.group({
-      date: '',
-      attendances: this.fb.array([]),
+    this.form = new FormGroup({
+      date: new FormControl(new Date(), { nonNullable: true }),
+      attendances: new FormArray<FormGroup<{ attendanceType: FormControl<number> }>>([]),
     });
   }
 
@@ -55,17 +56,13 @@ export class AttendanceComponent implements OnInit {
 
       this.info = data.info;
       this.attendanceTypes = data.attendanceTypes;
-      (this.form.get('date') as UntypedFormControl).setValue(
-        moment(this.info.date, 'DD-MMM-YYYY').toDate(),
-      );
-      this.form.setControl(
-        'attendances',
-        this.fb.array(
-          this.info.body.map((x) =>
-            this.fb.group({
-              attendanceType: x.attendanceType.id,
-            }),
-          ),
+      this.form.controls.date.setValue(moment(this.info.date, 'DD-MMM-YYYY').toDate());
+      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 AttendanceDataSource(this.attendanceObservable);
@@ -74,7 +71,7 @@ export class AttendanceComponent implements OnInit {
   }
 
   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, '-');
@@ -99,14 +96,10 @@ export class AttendanceComponent implements OnInit {
   getAttendance(): Attendance {
     const formModel = this.form.value;
     this.info.date = moment(formModel.date).format('DD-MMM-YYYY');
-    const array = this.form.get('attendances') as UntypedFormArray;
+    const array = this.form.controls.attendances!;
     this.info.body.forEach((item, index) => {
-      item.attendanceType.id = array.controls[index].value.attendanceType;
+      item.attendanceType.id = array.controls[index].value.attendanceType!;
     });
     return this.info;
   }
-
-  get attendancesArray(): UntypedFormArray {
-    return this.form.get('attendances') as UntypedFormArray;
-  }
 }

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

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