feat(Answer:65): refactor to use signal form

Author: phhien203

apps/forms/65-signal-form-edition/src/app/user-form.component.ts

@@ -4,21 +4,18 @@ import {
   effect,
   inject,
   input,
+  signal,
 } from '@angular/core';
 import { rxResource } from '@angular/core/rxjs-interop';
-import {
-  FormControl,
-  FormGroup,
-  ReactiveFormsModule,
-  Validators,
-} from '@angular/forms';
+import { form, FormField, min, required, submit } from '@angular/forms/signals';
 import { Router } from '@angular/router';
-import { of } from 'rxjs';
+import { lastValueFrom, of } from 'rxjs';
 import { FakeBackendService } from './fake-backend.service';
+import { User } from './user.model';
 
 @Component({
   selector: 'app-user-form',
-  imports: [ReactiveFormsModule],
+  imports: [FormField],
   template: `
     <div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
       <h2 class="mb-4 text-xl font-semibold text-gray-800">
@@ -30,7 +27,7 @@ import { FakeBackendService } from './fake-backend.service';
             class="h-8 w-8 animate-spin rounded-full border-4 border-indigo-500 border-t-transparent"></div>
         </div>
       } @else {
-        <form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="space-y-4">
+        <form (submit)="onSubmit($event)" class="space-y-4">
           <div>
             <label
               for="firstname"
@@ -40,15 +37,18 @@ import { FakeBackendService } from './fake-backend.service';
             <input
               id="firstname"
               type="text"
-              formControlName="firstname"
-              class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" />
+              class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none sm:text-sm"
+              [formField]="userSignalForm.firstname" />
             @if (
-              userForm.get('firstname')?.invalid &&
-              userForm.get('firstname')?.touched
+              userSignalForm.firstname().invalid() &&
+              userSignalForm.firstname().touched()
             ) {
-              <p class="mt-1 text-xs text-red-500">Firstname is required</p>
+              @for (error of userSignalForm.firstname().errors(); track error) {
+                <p class="mt-1 text-xs text-red-500">{{ error.message }}</p>
+              }
             }
           </div>
+
           <div>
             <label
               for="lastname"
@@ -58,49 +58,59 @@ import { FakeBackendService } from './fake-backend.service';
             <input
               id="lastname"
               type="text"
-              formControlName="lastname"
-              class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" />
+              class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none sm:text-sm"
+              [formField]="userSignalForm.lastname" />
             @if (
-              userForm.get('lastname')?.invalid &&
-              userForm.get('lastname')?.touched
+              userSignalForm.lastname().invalid() &&
+              userSignalForm.lastname().touched()
             ) {
-              <p class="mt-1 text-xs text-red-500">Lastname is required</p>
+              @for (error of userSignalForm.lastname().errors(); track error) {
+                <p class="mt-1 text-xs text-red-500">{{ error.message }}</p>
+              }
             }
           </div>
+
           <div>
             <label for="age" class="block text-sm font-medium text-gray-700">
               Age
             </label>
             <input
               id="age"
               type="number"
-              formControlName="age"
-              class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" />
-            @if (userForm.get('age')?.invalid && userForm.get('age')?.touched) {
-              <p class="mt-1 text-xs text-red-500">Age must be positive</p>
+              class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none sm:text-sm"
+              [formField]="userSignalForm.age" />
+            @if (
+              userSignalForm.age().invalid() && userSignalForm.age().touched()
+            ) {
+              @for (error of userSignalForm.age().errors(); track error) {
+                <p class="mt-1 text-xs text-red-500">{{ error.message }}</p>
+              }
             }
           </div>
+
           <div>
             <label for="grade" class="block text-sm font-medium text-gray-700">
               Grade
             </label>
             <input
               id="grade"
               type="number"
-              formControlName="grade"
-              class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" />
+              class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none sm:text-sm"
+              [formField]="userSignalForm.grade" />
           </div>
+
           <div class="flex justify-end space-x-3 pt-4">
             <button
               type="button"
               (click)="onCancel()"
-              class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+              class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none">
               Cancel
             </button>
+
             <button
               type="submit"
-              [disabled]="userForm.invalid"
-              class="rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50">
+              [disabled]="userSignalForm().invalid()"
+              class="rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50">
               {{ id() ? 'Update' : 'Add' }}
             </button>
           </div>
@@ -124,50 +134,51 @@ export class UserFormComponent {
     defaultValue: undefined,
   });
 
-  userForm = new FormGroup({
-    firstname: new FormControl('', {
-      nonNullable: true,
-      validators: [Validators.required],
-    }),
-    lastname: new FormControl('', {
-      nonNullable: true,
-      validators: [Validators.required],
-    }),
-    age: new FormControl(0, {
-      nonNullable: true,
-      validators: [Validators.required, Validators.min(0)],
-    }),
-    grade: new FormControl(0, {
-      nonNullable: true,
-      validators: [Validators.required],
-    }),
+  userModel = signal<Omit<User, 'id'>>({
+    firstname: '',
+    lastname: '',
+    age: 0,
+    grade: 0,
+  });
+
+  userSignalForm = form(this.userModel, (schemePath) => {
+    required(schemePath.firstname, { message: 'Firstname is required' });
+    required(schemePath.lastname, { message: 'Lastname is required' });
+    required(schemePath.age);
+    min(schemePath.age, 0, { message: 'Age must be positive' });
+    required(schemePath.grade);
   });
 
   constructor() {
     effect(() => {
       const userValue = this.userResource.value();
       if (userValue) {
-        this.userForm.patchValue(userValue);
+        this.userModel.set(userValue);
       } else {
-        this.userForm.reset({ firstname: '', lastname: '', age: 0, grade: 0 });
+        this.userModel.set({ firstname: '', lastname: '', age: 0, grade: 0 });
       }
     });
   }
 
-  onSubmit(): void {
-    if (this.userForm.valid) {
+  onSubmit(event: Event): void {
+    event.preventDefault();
+
+    submit(this.userSignalForm, async () => {
       const userValue = this.userResource.value();
-      const obs = userValue
-        ? this.backend.updateUser({
-            ...this.userForm.getRawValue(),
+
+      if (userValue) {
+        await lastValueFrom(
+          this.backend.updateUser({
+            ...this.userModel(),
             id: userValue.id,
-          })
-        : this.backend.addUser(this.userForm.getRawValue());
+          }),
+        );
+      } else {
+        await lastValueFrom(this.backend.addUser(this.userModel()));
+      }
 
-      obs.subscribe(() => {
-        this.router.navigate(['/']);
-      });
-    }
+      this.router.navigate(['/']);
+    });
   }
 
   onCancel(): void {