feat: use declarative code to submit the form

Author: tsironis13

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

@@ -2,7 +2,7 @@
   <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 class="space-y-6" (ngSubmit)="onSubmit($event)" novalidate>
+    <form class="space-y-6" [formRoot]="userForm">
       <div>
         <label for="name" class="mb-2 block text-sm font-medium text-gray-700">
           Name
@@ -73,7 +73,6 @@ <h1 class="mb-6 text-3xl font-bold text-gray-900">Simple Form</h1>
       <div class="flex gap-4">
         <button
           type="submit"
-          (click)="onSubmit($event)"
           [disabled]="userForm().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

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

@@ -5,45 +5,56 @@ import {
   signal,
   WritableSignal,
 } from '@angular/core';
-import { form, FormField, max, min, required } from '@angular/forms/signals';
+import {
+  form,
+  FormField,
+  FormRoot,
+  max,
+  min,
+  required,
+} from '@angular/forms/signals';
 
 type UserData = {
   name: string;
   lastname: string;
-  age: number;
+  age: number | null;
   note: string;
 };
 
 @Component({
   selector: 'app-root',
-  imports: [JsonPipe, FormField],
+  imports: [JsonPipe, FormField, FormRoot],
   templateUrl: './app.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
   private readonly _initialData: UserData = {
     name: '',
     lastname: '',
-    age: NaN,
+    age: null,
     note: '',
   };
   private _userModel = signal<UserData>(this._initialData);
 
-  protected userForm = form(this._userModel, (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' });
-  });
+  protected userForm = form(
+    this._userModel,
+    (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 () => {
+          if (this.userForm().valid()) {
+            this.setSubmittedData();
+          }
+        },
+      },
+    },
+  );
   protected submittedData: WritableSignal<UserData | null> = signal(null);
 
-  public onSubmit(event: Event): void {
-    event.preventDefault();
-
-    if (this.userForm().valid()) {
-      this.setSubmittedData();
-    }
-  }
-
   public onReset(): void {
     this.userForm().reset(this._initialData);
     this.setSubmittedData();