Chore: Moved from Untyped to Stongly Typed forms.

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { MatDatepicker } from '@angular/material/datepicker';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -17,15 +17,21 @@ import { EmployeeFunctionsService } from './employee-functions.service';
   styleUrls: ['./employee-functions.component.css'],
 })
 export class EmployeeFunctionsComponent {
-  creditSalaryForm: UntypedFormGroup;
-  attendanceRecordForm: UntypedFormGroup;
-  fingerprintForm: UntypedFormGroup;
+  creditSalaryForm: FormGroup<{
+    date: FormControl<moment.Moment>;
+  }>;
+
+  attendanceRecordForm: FormGroup<{
+    startDate: FormControl<moment.Moment>;
+    finishDate: FormControl<moment.Moment>;
+  }>;
+
+  fingerprintForm: FormGroup<{}>;
   fingerprintFile: File | null = null;
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: UntypedFormBuilder,
     private dialog: MatDialog,
     private toaster: ToasterService,
     private auth: AuthService,
@@ -33,37 +39,33 @@ export class EmployeeFunctionsComponent {
   ) {
     const startDate = moment().date(1);
     const finishDate = moment().date(startDate.daysInMonth());
-    this.creditSalaryForm = this.fb.group({
-      date: finishDate,
+    this.creditSalaryForm = new FormGroup({
+      date: new FormControl(finishDate, { nonNullable: true }),
     });
-    this.attendanceRecordForm = this.fb.group({
-      startDate,
-      finishDate,
+    this.attendanceRecordForm = new FormGroup({
+      startDate: new FormControl(moment(), { nonNullable: true }),
+      finishDate: new FormControl(moment(), { nonNullable: true }),
     });
-    this.fingerprintForm = this.fb.group({});
+    this.fingerprintForm = new FormGroup({});
   }
 
   chosenYearHandler(normalizedYear: Moment) {
-    const dateControl = this.creditSalaryForm.get('date') as UntypedFormControl;
-    const ctrlValue = dateControl.value;
+    const ctrlValue = this.creditSalaryForm.value.date!;
     ctrlValue.year(normalizedYear.year());
     ctrlValue.date(ctrlValue.daysInMonth());
-    dateControl.setValue(ctrlValue);
+    this.creditSalaryForm.setValue({ date: ctrlValue });
   }
 
   chosenMonthHandler(normlizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
-    const dateControl = this.creditSalaryForm.get('date') as UntypedFormControl;
-    const ctrlValue = dateControl.value;
+    const ctrlValue = this.creditSalaryForm.value.date!;
     ctrlValue.month(normlizedMonth.month());
     ctrlValue.date(ctrlValue.daysInMonth());
-    dateControl.setValue(ctrlValue);
+    this.creditSalaryForm.setValue({ date: ctrlValue });
     datepicker.close();
   }
 
   creditSalary() {
-    const date = moment((this.creditSalaryForm.get('date') as UntypedFormControl).value).format(
-      'DD-MMM-YYYY',
-    );
+    const date = this.creditSalaryForm.value.date!.format('DD-MMM-YYYY');
     if (!date) {
       this.toaster.show('Danger', 'Please choose a valid date.');
       return;
@@ -79,12 +81,8 @@ export class EmployeeFunctionsComponent {
   }
 
   attendanceRecordUrl() {
-    const startDate = moment(
-      (this.attendanceRecordForm.get('startDate') as UntypedFormControl).value,
-    ).format('DD-MMM-YYYY');
-    const finishDate = moment(
-      (this.attendanceRecordForm.get('finishDate') as UntypedFormControl).value,
-    ).format('DD-MMM-YYYY');
+    const startDate = this.attendanceRecordForm.value.startDate!.format('DD-MMM-YYYY');
+    const finishDate = this.attendanceRecordForm.value.finishDate!.format('DD-MMM-YYYY');
     if (!startDate || !finishDate) {
       // this.toaster.show('Danger', 'Please choose a start and finish date.');
       return '';
@@ -93,12 +91,8 @@ export class EmployeeFunctionsComponent {
   }
 
   fingerPrintUrl() {
-    const startDate = moment(
-      (this.attendanceRecordForm.get('startDate') as UntypedFormControl).value,
-    ).format('DD-MMM-YYYY');
-    const finishDate = moment(
-      (this.attendanceRecordForm.get('finishDate') as UntypedFormControl).value,
-    ).format('DD-MMM-YYYY');
+    const startDate = this.attendanceRecordForm.value.startDate!.format('DD-MMM-YYYY');
+    const finishDate = this.attendanceRecordForm.value.finishDate!.format('DD-MMM-YYYY');
     if (!startDate || !finishDate) {
       // this.toaster.show('Danger', 'Please choose a start and finish date.');
       return '';
@@ -107,7 +101,6 @@ export class EmployeeFunctionsComponent {
   }
 
   detectFiles(event: Event) {
-    // eslint-disable-next-line prefer-destructuring
     this.fingerprintFile = ((event.target as HTMLInputElement).files as FileList)[0];
   }