toSignal via Gemini

bookie/src/app/sales/receive-payment/receive-payment.component.html

@@ -1,12 +1,7 @@
 <h2 mat-dialog-title>Receive Payment</h2>
 <mat-dialog-content>
-  <form [formGroup]="form" class="flex-col">
-    <mat-table
-      #table
-      [dataSource]="dataSource"
-      formArrayName="amounts"
-      [style.visibility]="this.displayTable ? 'visible' : 'hidden'"
-    >
+  <form class="flex-col">
+    <mat-table #table [dataSource]="dataSource()" [style.visibility]="this.displayTable() ? 'visible' : 'hidden'">
       <!-- Name Column -->
       <ng-container matColumnDef="name">
         <mat-header-cell *matHeaderCellDef class="bold">Amount</mat-header-cell>
@@ -18,24 +13,24 @@
         <mat-header-cell *matHeaderCellDef class="center bold" class="flex-auto">{{
           amount | currency: 'INR'
         }}</mat-header-cell>
-        <mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i" class="flex-auto">
+        <mat-cell *matCellDef="let row; let i = index" class="center flex-auto">
           <mat-form-field>
-            <input matInput type="number" formControlName="amount" autocomplete="off" />
+            <input matInput type="number" [formField]="form.amounts[i].amount" autocomplete="off" />
           </mat-form-field>
         </mat-cell>
-        <mat-footer-cell *matFooterCellDef class="bold">{{ balance | currency: 'INR' }}</mat-footer-cell>
+        <mat-footer-cell *matFooterCellDef class="bold">{{ balance() | currency: 'INR' }}</mat-footer-cell>
       </ng-container>
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
       <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
       <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
     </mat-table>
-    <mat-form-field class="flex-auto" [style.visibility]="this.displayReason ? 'visible' : 'hidden'">
+    <mat-form-field class="flex-auto" [style.visibility]="this.displayReason() ? 'visible' : 'hidden'">
       <mat-label>Reason</mat-label>
       <input
         type="text"
         matInput
         #son
-        formControlName="son"
+        [formField]="form.son"
         autocomplete="off"
         (focus)="select(son.value) && son.select()"
         (input)="select(son.value)"
@@ -45,5 +40,5 @@
 </mat-dialog-content>
 <mat-dialog-actions align="end">
   <button mat-button [mat-dialog-close]>Cancel</button>
-  <button mat-button (click)="accept()" color="primary" [disabled]="!!balance">Ok</button>
+  <button type="button" mat-button (click)="accept()" color="primary" [disabled]="!!balance()">Ok</button>
 </mat-dialog-actions>