Chore:

Upgraded to Angular 14

bookie/src/app/roles/role-detail/role-detail.component.ts

@@ -1,5 +1,10 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import {
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
+} from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -15,13 +20,13 @@ import { RoleService } from '../role.service';
 })
 export class RoleDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   item: Role = new Role();
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private dialog: MatDialog,
     private ser: RoleService,
@@ -37,7 +42,7 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
     this.route.data.subscribe((value) => {
       const data = value as { item: Role };
       this.item = data.item;
-      (this.form.get('name') as FormControl).setValue(this.item.name);
+      (this.form.get('name') as UntypedFormControl).setValue(this.item.name);
       this.form.setControl(
         'permissions',
         this.fb.array(
@@ -99,7 +104,7 @@ 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 FormArray;
+    const array = this.form.get('permissions') as UntypedFormArray;
     this.item.permissions.forEach((item, index) => {
       item.enabled = array.controls[index].value.permission;
     });