Chore: Moved from Untyped to Stongly Typed forms.

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

@@ -1,10 +1,5 @@
 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 { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -20,24 +15,33 @@ import { UserService } from '../user.service';
 })
 export class UserDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    name: FormControl<string | null>;
+    password: FormControl<string | null>;
+    lockedOut: FormControl<boolean>;
+    roles: FormArray<
+      FormGroup<{
+        role: FormControl<boolean>;
+      }>
+    >;
+  }>;
+
   item: User = new User();
   hide: boolean;
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private dialog: MatDialog,
     private ser: UserService,
   ) {
     this.hide = true;
-    this.form = this.fb.group({
-      name: '',
-      password: '',
-      lockedOut: '',
-      roles: this.fb.array([]),
+    this.form = new FormGroup({
+      name: new FormControl<string | null>(null),
+      password: new FormControl<string | null>(null),
+      lockedOut: new FormControl<boolean>(false, { nonNullable: true }),
+      roles: new FormArray<FormGroup<{ role: FormControl<boolean> }>>([]),
     });
   }
 
@@ -51,17 +55,14 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
 
   showItem(item: User) {
     this.item = item;
-    (this.form.get('name') as UntypedFormControl).setValue(item.name);
-    (this.form.get('password') as UntypedFormControl).setValue('');
-    (this.form.get('lockedOut') as UntypedFormControl).setValue(item.lockedOut);
-    this.form.setControl(
-      'roles',
-      this.fb.array(
-        item.roles.map((x) =>
-          this.fb.group({
-            role: x.enabled,
-          }),
-        ),
+    this.form.controls.name.setValue(item.name);
+    this.form.controls.password.setValue(null);
+    this.form.controls.lockedOut.setValue(item.lockedOut);
+    this.item.roles.forEach((x) =>
+      this.form.controls.roles.push(
+        new FormGroup({
+          role: new FormControl<boolean>(x.enabled, { nonNullable: true }),
+        }),
       ),
     );
   }
@@ -125,12 +126,12 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
 
   getItem(): User {
     const formModel = this.form.value;
-    this.item.name = formModel.name;
-    this.item.password = formModel.password;
-    this.item.lockedOut = formModel.lockedOut;
-    const array = this.form.get('roles') as UntypedFormArray;
+    this.item.name = formModel.name!;
+    this.item.password = formModel.password!;
+    this.item.lockedOut = formModel.lockedOut!;
+    const array = this.form.controls.roles;
     this.item.roles.forEach((item, index) => {
-      item.enabled = array.controls[index].value.role;
+      item.enabled = array.controls[index].value.role!;
     });
     return this.item;
   }