toSignal via Gemini

bookie/src/app/product/product-detail/product-detail.component.html

@@ -1,77 +1,104 @@
 <h2>Product</h2>
-<form [formGroup]="form">
+<form>
   <div class="row-container">
     <mat-form-field class="basis-3-4">
       <mat-label>Name</mat-label>
-      <input matInput #name formControlName="name" />
+      <input matInput #name [formField]="form.name" />
     </mat-form-field>
     <mat-form-field class="basis-1-4">
       <mat-label>Fraction Units</mat-label>
-      <input matInput formControlName="fractionUnits" />
+      <input matInput [formField]="form.fractionUnits" />
     </mat-form-field>
   </div>
   <div class="row-container">
     <mat-form-field class="basis-3-4">
       <mat-label>Sale Category</mat-label>
-      <mat-select formControlName="saleCategory">
-        @for (sc of saleCategories; track sc) {
+      <mat-select [formField]="form.saleCategory">
+        @for (sc of saleCategories(); track sc) {
           <mat-option [value]="sc.id">
             {{ sc.name }}
           </mat-option>
         }
       </mat-select>
     </mat-form-field>
-    <mat-checkbox formControlName="enabled" class="basis-1-4">Enabled?</mat-checkbox>
+    <mat-checkbox [formField]="form.enabled" class="basis-1-4">Enabled?</mat-checkbox>
   </div>
   <!-- SKU section -->
   <h2>Stock Keeping Units</h2>
 
-  <div formGroupName="addRow" class="nutrition-grid">
+  <div class="nutrition-grid">
     <mat-form-field class="flex-auto">
       <mat-label>Units</mat-label>
-      <input matInput formControlName="units" />
+      <input matInput [formField]="form.addRow.units" />
+      @for (error of form.addRow.units().errors(); track error) {
+        <mat-error>{{ error.message }}</mat-error>
+      }
     </mat-form-field>
 
     <mat-form-field class="flex-auto">
       <mat-label>Fraction</mat-label>
-      <input matInput type="number" formControlName="fraction" />
+      <input matInput type="number" [formField]="form.addRow.fraction" />
+      @for (error of form.addRow.fraction().errors(); track error) {
+        <mat-error>{{ error.message }}</mat-error>
+      }
     </mat-form-field>
 
     <mat-form-field class="flex-auto">
       <mat-label>Yield</mat-label>
-      <input matInput type="number" formControlName="productYield" />
+      <input matInput type="number" [formField]="form.addRow.productYield" />
+      @for (error of form.addRow.productYield().errors(); track error) {
+        <mat-error>{{ error.message }}</mat-error>
+      }
     </mat-form-field>
 
     <mat-form-field class="flex-auto">
       <mat-label>Cost Price</mat-label>
-      <input matInput type="number" formControlName="costPrice" />
+      <input matInput type="number" [formField]="form.addRow.costPrice" />
+      @for (error of form.addRow.costPrice().errors(); track error) {
+        <mat-error>{{ error.message }}</mat-error>
+      }
     </mat-form-field>
 
     <mat-form-field class="flex-auto">
       <mat-label>Sale Price</mat-label>
-      <input matInput type="number" formControlName="salePrice" />
+      <input matInput type="number" [formField]="form.addRow.salePrice" />
+      @for (error of form.addRow.salePrice().errors(); track error) {
+        <mat-error>{{ error.message }}</mat-error>
+      }
     </mat-form-field>
 
     <mat-form-field class="flex-auto">
       <mat-label>Menu Category</mat-label>
-      <mat-select formControlName="menuCategory">
-        @for (mc of menuCategories; track mc) {
+      <mat-select [formField]="form.addRow.menuCategory">
+        @for (mc of menuCategories(); track mc) {
           <mat-option [value]="mc.id">
             {{ mc.name }}
           </mat-option>
         }
       </mat-select>
+      @for (error of form.addRow.menuCategory().errors(); track error) {
+        <mat-error>{{ error.message }}</mat-error>
+      }
     </mat-form-field>
 
-    <mat-checkbox formControlName="hasHappyHour" class="flex-auto">Has Happy Hour?</mat-checkbox>
-    <mat-checkbox formControlName="isNotAvailable" class="flex-auto">Not Available?</mat-checkbox>
+    <mat-checkbox [formField]="form.addRow.hasHappyHour" class="flex-auto">Has Happy Hour?</mat-checkbox>
+    <mat-checkbox [formField]="form.addRow.isNotAvailable" class="flex-auto">Not Available?</mat-checkbox>
 
-    <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto">Add</button>
+    <button
+      type="button"
+      mat-raised-button
+      color="primary"
+      [disabled]="form.addRow().invalid()"
+      (click)="addRow()"
+      class="flex-auto"
+    >
+      Add
+    </button>
   </div>
 </form>
 <!-- SKU table -->
 <div class="row-container wrapped">
-  <mat-table [dataSource]="dataSource" aria-label="Stock Keeping Units" class="flex-auto">
+  <mat-table [dataSource]="this.formModel().skus" aria-label="Stock Keeping Units" class="flex-auto">
     <!-- Units Column -->
     <ng-container matColumnDef="units">
       <mat-header-cell *matHeaderCellDef>Units</mat-header-cell>
@@ -130,10 +157,10 @@
     <ng-container matColumnDef="action">
       <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
       <mat-cell *matCellDef="let row" class="center">
-        <button mat-icon-button tabindex="-1" (click)="editRow(row)">
+        <button type="button" mat-icon-button tabindex="-1" (click)="editRow(row)">
           <mat-icon>edit</mat-icon>
         </button>
-        <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
+        <button type="button" mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
           <mat-icon>delete</mat-icon>
         </button>
       </mat-cell>
@@ -144,8 +171,8 @@
   </mat-table>
 </div>
 <div class="row-container">
-  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-  @if (!!item.id) {
-    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  <button type="button" mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  @if (!!item().id) {
+    <button type="button" mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
   }
 </div>