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>