toSignal via Gemini

bookie/src/app/users/user-detail/user-detail.component.html

@@ -1,32 +1,32 @@
 <h2>User</h2>
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Name</mat-label>
-      <input matInput #nameElement formControlName="name" />
+      <input matInput #nameElement [formField]="form.name" />
     </mat-form-field>
   </div>
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Password</mat-label>
-      <input matInput formControlName="password" [type]="hide ? 'password' : 'text'" />
+      <input matInput [formField]="form.password" [type]="hide ? 'password' : 'text'" />
       <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
     </mat-form-field>
   </div>
   <div class="row-container">
-    <mat-checkbox formControlName="lockedOut">Is Locked Out?</mat-checkbox>
+    <mat-checkbox [formField]="form.lockedOut">Is Locked Out?</mat-checkbox>
   </div>
   <mat-divider></mat-divider>
-  <div formArrayName="roles">
-    @for (r of item.roles; track r; let i = $index) {
-      <div [formGroupName]="i" class="row-container">
-        <mat-checkbox formControlName="role" class="flex-auto">{{ r.name }}</mat-checkbox>
+  <div>
+    @for (r of form.roles; track r; let i = $index) {
+      <div class="row-container">
+        <mat-checkbox [formField]="r.enabled" class="flex-auto">{{ r.name().value() }}</mat-checkbox>
       </div>
     }
   </div>
 </form>
 
 <div class="row-container">
-  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-  <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  <button type="button" mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  <button type="button" mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
 </div>

bookie/src/app/users/user-detail/user-detail.component.ts

@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AfterViewInit, Component, ElementRef, ViewChild, computed, inject, linkedSignal, input } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
@@ -14,74 +14,57 @@ import { User } from '../../core/user';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { UserService } from '../user.service';
 
+export interface UserDetailFormData {
+  name: string;
+  password: string;
+  lockedOut: boolean;
+  roles: { id: string; name: string; enabled: boolean }[];
+}
+
 @Component({
   selector: 'app-user-detail',
   templateUrl: './user-detail.component.html',
   styleUrls: ['./user-detail.component.css'],
   imports: [
     MatButtonModule,
-
     MatCheckboxModule,
     MatDividerModule,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
-    ReactiveFormsModule,
+    FormField,
   ],
 })
-export class UserDetailComponent implements OnInit, AfterViewInit {
+export class UserDetailComponent implements AfterViewInit {
+  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
   private ser = inject(UserService);
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
 
-  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup<{
-    name: FormControl<string | null>;
-    password: FormControl<string | null>;
-    lockedOut: FormControl<boolean>;
-    roles: FormArray<
-      FormGroup<{
-        role: FormControl<boolean>;
-      }>
-    >;
-  }>;
+  itemResource = this.ser.get(this.id);
 
-  item: User = new User();
-  hide: boolean;
+  item = computed(() => this.itemResource.value() ?? new User());
+  formModel = linkedSignal({
+    source: this.item,
+    computation: (itemVal): UserDetailFormData => {
+      return {
+        name: itemVal.name ?? '',
+        password: '',
+        lockedOut: itemVal.lockedOut,
+        roles: itemVal.roles.map((x) => ({ id: x.id ?? '', name: x.name, enabled: x.enabled })),
+      };
+    },
+  });
+
+  form = form(this.formModel);
+
+  hide = true;
 
   constructor() {
     this.hide = true;
-    // Create form
-    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> }>>([]),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: User };
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: User) {
-    this.item = item;
-    this.form.controls.name.setValue(item.name);
-    this.form.controls.password.setValue('');
-    this.form.controls.lockedOut.setValue(item.lockedOut);
-    this.form.controls.roles.clear();
-    this.item.roles.forEach((x) =>
-      this.form.controls.roles.push(
-        new FormGroup({
-          role: new FormControl<boolean>(x.enabled, { nonNullable: true }),
-        }),
-      ),
-    );
   }
 
   ngAfterViewInit() {
@@ -96,26 +79,26 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
-        if ((this.item.id as string) === 'me') {
+        if ((this.item().id as string) === 'me') {
           this.router.navigateByUrl('/');
         } else {
           this.router.navigateByUrl('/users');
         }
       },
-      error: (error) => {
-        this.snackBar.open(error, 'Error');
+      error: (error: unknown) => {
+        this.snackBar.open(error as string, 'Error');
       },
     });
   }
 
   delete() {
-    this.ser.delete(this.item.id as string).subscribe({
+    this.ser.delete(this.item().id as string).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/users');
       },
-      error: (error) => {
-        this.snackBar.open(error, 'Error');
+      error: (error: unknown) => {
+        this.snackBar.open(error as string, 'Error');
       },
     });
   }
@@ -134,14 +117,13 @@ 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 ?? true;
-    const array = this.form.controls.roles;
-    this.item.roles.forEach((item, index) => {
-      item.enabled = array.controls[index].value.role ?? false;
+    const formModel = this.formModel();
+    return new User({
+      ...this.item(),
+      name: formModel.name ?? '',
+      password: formModel.password ?? '',
+      lockedOut: formModel.lockedOut ?? true,
+      roles: formModel.roles.map((x) => ({ id: x.id ?? '', name: x.name, enabled: x.enabled })),
     });
-    return this.item;
   }
 }