Update to angular 21, switch to signal forms for column editor

src/app/column-editor/column-editor.component.ts

@@ -14,6 +14,7 @@ import { Dialog } from 'primeng/dialog';
 import { FloatLabel } from 'primeng/floatlabel';
 import { InputText } from 'primeng/inputtext';
 import { Select } from 'primeng/select';
+import { Field, form } from '@angular/forms/signals';
 
 @Component({
   selector: 'app-column-editor',
@@ -28,6 +29,7 @@ import { Select } from 'primeng/select';
     FloatLabel,
     InputText,
     Select,
+    Field,
   ],
   template: `
     <p-accordion [value]="0">
@@ -65,29 +67,25 @@ import { Select } from 'primeng/select';
       </p-accordion-panel>
     </p-accordion>
     <p-dialog [(visible)]="editDialogVisible" header="Edit Column">
-      @let editingColumn = this.editingColumn();
-      @if (editingColumn) {
-        <p-float-label>
-          <input
-            pInputText
-            id="column-edit-name"
-            [(ngModel)]="editingColumn.name"
-          />
-          <label for="column-edit-name">Name</label>
-        </p-float-label>
-        <p-float-label>
-          <p-select inputId="column-edit-type"></p-select>
-          <label for="column-edit-type">Type</label>
-        </p-float-label>
-        <div class="flex items-center gap-2">
-          <p-check-box
-            [(ngModel)]="editingColumn.enabled"
-            [binary]="true"
-            inputId="column-edit-enabled"
-          ></p-check-box>
-          <label for="column-edit-enabled">Enabled</label>
-        </div>
-      }
+      <p-float-label variant="in">
+        <input pInputText id="column-edit-name" [field]="editingColumn.name" />
+        <label for="column-edit-name">Name</label>
+      </p-float-label>
+      <p-float-label variant="in">
+        <p-select
+          inputId="column-edit-type"
+          [field]="editingColumn.type"
+        ></p-select>
+        <label for="column-edit-type">Type</label>
+      </p-float-label>
+      <div class="flex items-center gap-2">
+        <p-check-box
+          [field]="editingColumn.enabled"
+          [binary]="true"
+          inputId="column-edit-enabled"
+        ></p-check-box>
+        <label for="column-edit-enabled">Enabled</label>
+      </div>
     </p-dialog>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -96,7 +94,14 @@ export class ColumnEditorComponent {
   columns = model<Column[]>();
 
   protected editDialogVisible = signal(false);
-  protected editingColumn = signal<Column | null>(null);
+
+  protected currentColumn = signal<Column>({
+    name: '',
+    enabled: true,
+    type: 'string',
+  });
+
+  protected editingColumn = form(this.currentColumn);
 
   protected checkboxChanged(index: number) {
     this.columns.update((columns) => {
@@ -115,7 +120,7 @@ export class ColumnEditorComponent {
   protected editColumn(index: number) {
     const columns = this.columns();
     if (columns) {
-      this.editingColumn.set(columns[index]);
+      this.currentColumn.set(columns[index]);
       this.editDialogVisible.set(true);
     }
   }