Chore: Moved from Untyped to Stongly Typed forms.

overlord/src/app/role/role-detail/role-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,20 +15,27 @@ import { RoleService } from '../role.service';
 })
 export class RoleDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    name: FormControl<string | null>;
+    permissions: FormArray<
+      FormGroup<{
+        permission: FormControl<boolean>;
+      }>
+    >;
+  }>;
+
   item: Role = new Role();
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private dialog: MatDialog,
     private ser: RoleService,
   ) {
-    this.form = this.fb.group({
-      name: '',
-      permissions: this.fb.array([]),
+    this.form = new FormGroup({
+      name: new FormControl<string | null>(null),
+      permissions: new FormArray<FormGroup<{ permission: FormControl<boolean> }>>([]),
     });
   }
 
@@ -42,15 +44,12 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
       const data = value as { item: Role };
 
       this.item = data.item;
-      (this.form.get('name') as UntypedFormControl).setValue(this.item.name);
-      this.form.setControl(
-        'permissions',
-        this.fb.array(
-          this.item.permissions.map((x) =>
-            this.fb.group({
-              permission: x.enabled,
-            }),
-          ),
+      this.form.controls.name.setValue(this.item.name);
+      this.item.permissions.forEach((x) =>
+        this.form.controls.permissions.push(
+          new FormGroup({
+            permission: new FormControl<boolean>(x.enabled, { nonNullable: true }),
+          }),
         ),
       );
     });
@@ -103,10 +102,10 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
 
   getItem(): Role {
     const formModel = this.form.value;
-    this.item.name = formModel.name;
-    const array = this.form.get('permissions') as UntypedFormArray;
+    this.item.name = formModel.name!;
+    const array = this.form.controls.permissions;
     this.item.permissions.forEach((item, index) => {
-      item.enabled = array.controls[index].value.permission;
+      item.enabled = array.controls[index].value.permission!;
     });
     return this.item;
   }

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