Chore: Moved from Untyped to Stongly Typed forms.

overlord/src/app/entries/entries.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatRadioChange } from '@angular/material/radio';
 import { MatSort, SortDirection } from '@angular/material/sort';
@@ -19,7 +19,13 @@ export class EntriesComponent implements OnInit {
   @ViewChild(MatSort, { static: true }) sort?: MatSort;
   info: Report = new Report();
   dataSource: EntriesDatasource = new EntriesDatasource(this.info.report, 0);
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    startDate: FormControl<Date>;
+    finishDate: FormControl<Date>;
+    posted: FormControl<boolean | null>;
+    issue: FormControl<boolean>;
+  }>;
+
   displayedColumns = [
     'date',
     'voucherType',
@@ -32,16 +38,12 @@ export class EntriesComponent implements OnInit {
 
   posted: boolean | null = null;
   issue: boolean = false;
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private fb: UntypedFormBuilder,
-  ) {
-    this.form = this.fb.group({
-      startDate: '',
-      finishDate: '',
-      posted: '',
-      issue: '',
+  constructor(private route: ActivatedRoute, private router: Router) {
+    this.form = new FormGroup({
+      startDate: new FormControl(new Date(), { nonNullable: true }),
+      finishDate: new FormControl(new Date(), { nonNullable: true }),
+      posted: new FormControl<boolean | null>(null),
+      issue: new FormControl<boolean>(false, { nonNullable: true }),
     });
   }
 
@@ -50,10 +52,8 @@ export class EntriesComponent implements OnInit {
       const data = value as { info: Report };
       this.info = data.info;
       const queryMap = this.route.snapshot.queryParamMap;
-      const startDateO = queryMap.get('s');
-      const finishDateO = queryMap.get('f');
-      const startDate = startDateO !== null ? moment(startDateO, 'DD-MMM-YYYY').toDate() : '';
-      const finishDate = finishDateO !== null ? moment(finishDateO, 'DD-MMM-YYYY').toDate() : '';
+      const startDate = moment(queryMap.get('s') || undefined, 'DD-MMM-YYYY').toDate();
+      const finishDate = moment(queryMap.get('f') || undefined, 'DD-MMM-YYYY').toDate();
       const postedO = queryMap.get('p');
       this.posted = postedO !== null ? postedO === 'true' : null;
       const pageSizeO = queryMap.get('ps');
@@ -69,13 +69,13 @@ export class EntriesComponent implements OnInit {
       this.form.setValue({
         startDate: startDate,
         finishDate: finishDate,
-        posted: postedO ?? 'null',
+        posted: this.posted,
         issue: this.issue,
       });
       if (this.posted === null || this.posted) {
-        (this.form.get('issue') as UntypedFormControl).enable();
+        this.form.controls.issue.enable();
       } else {
-        (this.form.get('issue') as UntypedFormControl).disable();
+        this.form.controls.issue.disable();
       }
       this.dataSource = new EntriesDatasource(
         this.info.report,
@@ -106,12 +106,8 @@ export class EntriesComponent implements OnInit {
 
   refresh() {
     const formModel = this.form.value;
-    const startDate = formModel.startDate
-      ? moment(formModel.startDate).format('DD-MMM-YYYY')
-      : null;
-    const finishDate = formModel.finishDate
-      ? moment(formModel.finishDate).format('DD-MMM-YYYY')
-      : null;
+    const startDate = moment(formModel.startDate).format('DD-MMM-YYYY');
+    const finishDate = moment(formModel.finishDate).format('DD-MMM-YYYY');
     this.router.navigate([], {
       relativeTo: this.route,
       queryParams: { s: startDate, f: finishDate },
@@ -120,13 +116,10 @@ export class EntriesComponent implements OnInit {
   }
 
   togglePosted($event: MatRadioChange) {
-    if ($event.value === 'true') {
-      this.posted = true;
-    } else if ($event.value === 'false') {
-      this.posted = false;
+    console.log($event.value);
+    this.posted = $event.value;
+    if (this.posted === false) {
       this.issue = false;
-    } else {
-      this.posted = null;
     }
     this.router.navigate([], {
       relativeTo: this.route,