toSignal via Gemini

bookie/src/app/sales/reason/reason.component.ts

@@ -1,13 +1,15 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { Component, ElementRef, ViewChild, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, ElementRef, ViewChild, inject, computed, signal } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatTableModule } from '@angular/material/table';
 
-import { ReasonDatasource } from './reason-datasource';
+export interface ReasonFormData {
+  son: string;
+}
 
 @Component({
   selector: 'app-reason',
@@ -20,22 +22,24 @@ import { ReasonDatasource } from './reason-datasource';
     MatFormFieldModule,
     MatInputModule,
     MatTableModule,
-    ReactiveFormsModule,
+    FormField,
   ],
 })
 export class ReasonComponent {
+  @ViewChild('son', { static: true }) son?: ElementRef;
   dialogRef = inject<MatDialogRef<ReasonComponent>>(MatDialogRef);
   private data = inject<{
     title: string;
     reasons: string[];
   }>(MAT_DIALOG_DATA);
 
-  @ViewChild('son', { static: true }) son?: ElementRef;
-  form: FormGroup<{
-    son: FormControl<string>;
-  }>;
+  formModel = signal<ReasonFormData>({
+    son: '',
+  });
 
-  dataSource: ReasonDatasource;
+  form = form(this.formModel);
+
+  dataSource = computed(() => this.reasons);
   title: string;
   selected = '';
   reasons: string[];
@@ -46,10 +50,6 @@ export class ReasonComponent {
 
     this.reasons = data.reasons ?? [];
     this.title = data.title;
-    this.form = new FormGroup({
-      son: new FormControl<string>('', { nonNullable: true }),
-    });
-    this.dataSource = new ReasonDatasource(this.reasons);
   }
 
   select(reason: string) {