feat(challenge 65): refactor user form component from reactive form to signal form

Author: truonghungit

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

@@ -1,24 +1,20 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  effect,
   inject,
   input,
+  linkedSignal,
 } 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 { FakeBackendService } from './fake-backend.service';
+import { EditingUser } 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 +26,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,13 +36,14 @@ 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" />
+              [formField]="userForm.firstname"
+              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" />
             @if (
-              userForm.get('firstname')?.invalid &&
-              userForm.get('firstname')?.touched
+              userForm.firstname().invalid() && userForm.firstname().touched()
             ) {
-              <p class="mt-1 text-xs text-red-500">Firstname is required</p>
+              @for (error of userForm.firstname().errors(); track error) {
+                <p class="mt-1 text-xs text-red-500">{{ error.message }}</p>
+              }
             }
           </div>
           <div>
@@ -58,13 +55,14 @@ 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" />
+              [formField]="userForm.lastname"
+              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" />
             @if (
-              userForm.get('lastname')?.invalid &&
-              userForm.get('lastname')?.touched
+              userForm.lastname().invalid() && userForm.lastname().touched()
             ) {
-              <p class="mt-1 text-xs text-red-500">Lastname is required</p>
+              @for (error of userForm.lastname().errors(); track error) {
+                <p class="mt-1 text-xs text-red-500">{{ error.message }}</p>
+              }
             }
           </div>
           <div>
@@ -74,10 +72,12 @@ import { FakeBackendService } from './fake-backend.service';
             <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>
+              [formField]="userForm.age"
+              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" />
+            @if (userForm.age().invalid() && userForm.age().touched()) {
+              @for (error of userForm.age().errors(); track error) {
+                <p class="mt-1 text-xs text-red-500">{{ error.message }}</p>
+              }
             }
           </div>
           <div>
@@ -87,20 +87,25 @@ import { FakeBackendService } from './fake-backend.service';
             <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" />
+              [formField]="userForm.grade"
+              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" />
+            @if (userForm.grade().invalid() && userForm.grade().touched()) {
+              @for (error of userForm.grade().errors(); track error) {
+                <p class="mt-1 text-xs text-red-500">{{ error.message }}</p>
+              }
+            }
           </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]="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:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50">
               {{ id() ? 'Update' : 'Add' }}
             </button>
           </div>
@@ -124,50 +129,56 @@ 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 = linkedSignal<EditingUser>(() => {
+    const user = this.userResource.value();
+    const defaultUser: EditingUser = {
+      firstname: '',
+      lastname: '',
+      age: 0,
+      grade: 0,
+    };
+
+    return user
+      ? {
+          firstname: user.firstname,
+          lastname: user.lastname,
+          age: user.age,
+          grade: user.grade,
+        }
+      : defaultUser;
   });
 
-  constructor() {
-    effect(() => {
-      const userValue = this.userResource.value();
-      if (userValue) {
-        this.userForm.patchValue(userValue);
-      } else {
-        this.userForm.reset({ firstname: '', lastname: '', age: 0, grade: 0 });
-      }
-    });
-  }
+  userForm = form(this.userModel, (schemaPath) => {
+    required(schemaPath.firstname, { message: 'First name is required' });
+    required(schemaPath.lastname, { message: 'Last name is required' });
+    required(schemaPath.age, { message: 'Age is required' });
+    min(schemaPath.age, 0, { message: 'Age must be positive' });
+    required(schemaPath.grade, { message: 'Grade is required' });
+  });
 
-  onSubmit(): void {
-    if (this.userForm.valid) {
+  onSubmit(event: Event): void {
+    event.preventDefault();
+
+    submit(this.userForm, async () => {
       const userValue = this.userResource.value();
-      const obs = userValue
+      const formValue = this.userModel();
+      const request = userValue
         ? this.backend.updateUser({
-            ...this.userForm.getRawValue(),
+            ...formValue,
             id: userValue.id,
           })
-        : this.backend.addUser(this.userForm.getRawValue());
+        : this.backend.addUser(formValue);
 
-      obs.subscribe(() => {
-        this.router.navigate(['/']);
+      request.subscribe({
+        next: () => {
+          this.router.navigate(['/']);
+        },
+        error: (error) => {
+          console.error('Error saving user:', error);
+          // Here you could set an error state to display an error message in the UI
+        },
       });
-    }
+    });
   }
 
   onCancel(): void {

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

@@ -5,3 +5,5 @@ export interface User {
   age: number;
   grade: number;
 }
+
+export type EditingUser = Omit<User, 'id'>;