Chore: Moved from Untyped to Stongly Typed forms.

overlord/src/app/client/client-detail/client-detail.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -15,22 +15,30 @@ import { ClientService } from '../client.service';
 })
 export class ClientDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    code: FormControl<number | string>;
+    name: FormControl<string | null>;
+    enabled: FormControl<boolean>;
+    otp: FormControl<number | null>;
+  }>;
+
   item: Client = new Client();
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private ser: ClientService,
   ) {
-    this.form = this.fb.group({
-      code: { value: '', disabled: true },
-      name: '',
-      enabled: false,
-      otp: '',
+    this.form = new FormGroup({
+      code: new FormControl<number | string>(
+        { value: '(Auto)', disabled: true },
+        { nonNullable: true },
+      ),
+      name: new FormControl<string | null>(null),
+      enabled: new FormControl<boolean>(false, { nonNullable: true }),
+      otp: new FormControl<number | null>(null),
     });
   }
 
@@ -48,7 +56,7 @@ export class ClientDetailComponent implements OnInit, AfterViewInit {
       code: this.item.code || '(Auto)',
       name: this.item.name,
       enabled: this.item.enabled,
-      otp: this.item.otp,
+      otp: this.item.otp || null,
     });
   }
 
@@ -99,9 +107,9 @@ export class ClientDetailComponent implements OnInit, AfterViewInit {
 
   getItem(): Client {
     const formModel = this.form.value;
-    this.item.name = formModel.name;
-    this.item.enabled = formModel.enabled;
-    this.item.otp = formModel.otp;
+    this.item.name = formModel.name!;
+    this.item.enabled = formModel.enabled!;
+    this.item.otp = formModel.otp || undefined;
     return this.item;
   }
 }

overlord/src/app/client/client.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';