feat(challenge 61): refactor simple form from reactive form to use signal forms

Author: truonghungit

apps/forms/61-simplest-signal-form/src/app/app.component.ts

@@ -1,21 +1,38 @@
 import { JsonPipe } from '@angular/common';
 import { Component, signal, WritableSignal } from '@angular/core';
+
 import {
-  FormControl,
-  FormGroup,
-  ReactiveFormsModule,
-  Validators,
-} from '@angular/forms';
+  form,
+  FormField,
+  FormRoot,
+  max,
+  min,
+  required,
+} from '@angular/forms/signals';
+
+type FormData = {
+  name: string;
+  lastname: string;
+  age: number;
+  note: string;
+};
+
+const initialFormData: FormData = {
+  name: '',
+  lastname: '',
+  age: NaN,
+  note: '',
+};
 
 @Component({
   selector: 'app-root',
-  imports: [ReactiveFormsModule, JsonPipe],
+  imports: [FormField, FormRoot, JsonPipe],
   template: `
     <div class="min-h-screen bg-gray-100 px-4 py-12 sm:px-6 lg:px-8">
       <div class="mx-auto max-w-md rounded-lg bg-white p-8 shadow-md">
         <h1 class="mb-6 text-3xl font-bold text-gray-900">Simple Form</h1>
 
-        <form [formGroup]="form" (ngSubmit)="onSubmit()" class="space-y-6">
+        <form [formRoot]="form" class="space-y-6">
           <div>
             <label
               for="name"
@@ -26,14 +43,16 @@ import {
             <input
               id="name"
               type="text"
-              formControlName="name"
+              [formField]="form.name"
               placeholder="Enter your name"
-              class="w-full rounded-md border border-gray-300 px-4 py-2 outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+              class="w-full rounded-md border border-gray-300 px-4 py-2 transition outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
               [class.border-red-500]="
-                form.controls.name.invalid && !form.controls.name.untouched
+                form.name().invalid() && form.name().touched()
               " />
-            @if (form.controls.name.invalid && !form.controls.name.untouched) {
-              <p class="mt-1 text-sm text-red-600">Name is required</p>
+            @if (form.name().invalid() && form.name().touched()) {
+              @for (error of form.name().errors(); track error) {
+                <p class="mt-1 text-sm text-red-600">{{ error.message }}</p>
+              }
             }
           </div>
 
@@ -46,9 +65,9 @@ import {
             <input
               id="lastname"
               type="text"
-              formControlName="lastname"
+              [formField]="form.lastname"
               placeholder="Enter your last name"
-              class="w-full rounded-md border border-gray-300 px-4 py-2 outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500" />
+              class="w-full rounded-md border border-gray-300 px-4 py-2 transition outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500" />
           </div>
 
           <div>
@@ -60,23 +79,16 @@ import {
             <input
               id="age"
               type="number"
-              formControlName="age"
+              [formField]="form.age"
               placeholder="Enter your age (1-99)"
-              min="1"
-              max="99"
-              class="w-full rounded-md border border-gray-300 px-4 py-2 outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+              class="w-full rounded-md border border-gray-300 px-4 py-2 transition outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
               [class.border-red-500]="
-                form.controls.age.invalid && !form.controls.age.untouched
+                form.age().invalid() && form.age().touched()
               " />
-            @if (form.controls.age.invalid && !form.controls.age.untouched) {
-              <p class="mt-1 text-sm text-red-600">
-                @if (form.controls.age.hasError('min')) {
-                  Age must be at least 1
-                }
-                @if (form.controls.age.hasError('max')) {
-                  Age must be at most 99
-                }
-              </p>
+            @if (form.age().invalid() && form.age().touched()) {
+              @for (error of form.age().errors(); track error) {
+                <p class="mt-1 text-sm text-red-600">{{ error.message }}</p>
+              }
             }
           </div>
 
@@ -89,15 +101,15 @@ import {
             <input
               id="note"
               type="text"
-              formControlName="note"
+              [formField]="form.note"
               placeholder="Enter a note"
-              class="w-full rounded-md border border-gray-300 px-4 py-2 outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500" />
+              class="w-full rounded-md border border-gray-300 px-4 py-2 transition outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500" />
           </div>
 
           <div class="flex gap-4">
             <button
               type="submit"
-              [disabled]="form.invalid"
+              [disabled]="form().invalid()"
               class="flex-1 rounded-md bg-blue-600 px-4 py-2 font-medium text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-400">
               Submit
             </button>
@@ -126,35 +138,28 @@ import {
   `,
 })
 export class AppComponent {
-  form = new FormGroup({
-    name: new FormControl('', {
-      validators: Validators.required,
-      nonNullable: true,
-    }),
-    lastname: new FormControl('', { nonNullable: true }),
-    age: new FormControl<number | null>(null, [
-      Validators.min(1),
-      Validators.max(99),
-    ]),
-    note: new FormControl('', { nonNullable: true }),
-  });
+  model = signal<FormData>(initialFormData);
 
-  submittedData: WritableSignal<{
-    name: string;
-    lastname: string;
-    age: number | null;
-    note: string;
-  } | null> = signal(null);
+  form = form(
+    this.model,
+    (schemaPath) => {
+      required(schemaPath.name, { message: 'Name is required' });
+      min(schemaPath.age, 1, { message: 'Age must be at least 1' });
+      max(schemaPath.age, 99, { message: 'Age must be at most 99' });
+    },
+    {
+      submission: {
+        action: async (f) => {
+          this.submittedData.set(f().value());
+        },
+      },
+    },
+  );
 
-  onSubmit(): void {
-    if (this.form.valid) {
-      this.submittedData.set(this.form.getRawValue());
-      console.log('Form submitted:', this.submittedData);
-    }
-  }
+  submittedData: WritableSignal<FormData | null> = signal(null);
 
   onReset(): void {
-    this.form.reset();
+    this.form().reset(initialFormData);
     this.submittedData.set(null);
   }
 }