From 291c596305695154f1408c3a4593ad05aef90345 Mon Sep 17 00:00:00 2001
From: Tsironis Ioannis <gtsironis8@gmail.com>
Date: Mon, 9 Mar 2026 15:14:44 +0200
Subject: [PATCH 1/2] feat: fix forms simplest signal form challenge

---
 .../src/app/app.component.html                | 102 ++++++++++
 .../src/app/app.component.ts                  | 187 ++++--------------
 2 files changed, 144 insertions(+), 145 deletions(-)
 create mode 100644 apps/forms/61-simplest-signal-form/src/app/app.component.html

diff --git a/apps/forms/61-simplest-signal-form/src/app/app.component.html b/apps/forms/61-simplest-signal-form/src/app/app.component.html
new file mode 100644
index 000000000..748d4e96e
--- /dev/null
+++ b/apps/forms/61-simplest-signal-form/src/app/app.component.html
@@ -0,0 +1,102 @@
+<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 class="space-y-6" (ngSubmit)="onSubmit($event)" novalidate>
+      <div>
+        <label for="name" class="mb-2 block text-sm font-medium text-gray-700">
+          Name
+          <span class="text-red-500">*</span>
+        </label>
+        <input
+          id="name"
+          type="text"
+          [formField]="userForm.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.border-red-500]="
+            userForm.name().invalid() && userForm.name().touched()
+          " />
+        @if (userForm.name().errors().length > 0 && userForm.name().touched()) {
+          @for (error of userForm.name().errors(); track error) {
+            <p class="mt-1 text-sm text-red-600">{{ error.message }}</p>
+          }
+        }
+      </div>
+
+      <div>
+        <label
+          for="lastname"
+          class="mb-2 block text-sm font-medium text-gray-700">
+          Last Name
+        </label>
+        <input
+          id="lastname"
+          type="text"
+          [formField]="userForm.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" />
+      </div>
+
+      <div>
+        <label for="age" class="mb-2 block text-sm font-medium text-gray-700">
+          Age
+        </label>
+        <input
+          id="age"
+          type="number"
+          [formField]="userForm.age"
+          placeholder="Enter your age (1-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.border-red-500]="
+            userForm.age().invalid() && userForm.age().touched()
+          " />
+        @if (userForm.age().errors().length > 0 && userForm.age().touched()) {
+          @for (error of userForm.age().errors(); track error) {
+            <p class="mt-1 text-sm text-red-600">{{ error.message }}</p>
+          }
+        }
+      </div>
+
+      <div>
+        <label for="note" class="mb-2 block text-sm font-medium text-gray-700">
+          Note
+        </label>
+        <input
+          id="note"
+          type="text"
+          [formField]="userForm.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" />
+      </div>
+
+      <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
+        </button>
+        <button
+          type="button"
+          (click)="onReset()"
+          class="flex-1 rounded-md bg-gray-600 px-4 py-2 font-medium text-white transition hover:bg-gray-700">
+          Reset
+        </button>
+      </div>
+    </form>
+
+    @if (submittedData()) {
+      <div class="mt-8 rounded-lg border border-green-200 bg-green-50 p-4">
+        <h2 class="mb-2 text-lg font-semibold text-green-900">
+          Submitted Data:
+        </h2>
+        <pre
+          class="overflow-x-auto rounded border border-green-200 bg-white p-4 text-sm"
+          >{{ submittedData() | json }}</pre
+        >
+      </div>
+    }
+  </div>
+</div>
diff --git a/apps/forms/61-simplest-signal-form/src/app/app.component.ts b/apps/forms/61-simplest-signal-form/src/app/app.component.ts
index 48edfb268..3970d91bd 100644
--- a/apps/forms/61-simplest-signal-form/src/app/app.component.ts
+++ b/apps/forms/61-simplest-signal-form/src/app/app.component.ts
@@ -1,160 +1,57 @@
 import { JsonPipe } from '@angular/common';
-import { Component, signal, WritableSignal } from '@angular/core';
 import {
-  FormControl,
-  FormGroup,
-  ReactiveFormsModule,
-  Validators,
-} from '@angular/forms';
+  ChangeDetectionStrategy,
+  Component,
+  signal,
+  WritableSignal,
+} from '@angular/core';
+import { form, FormField, max, min, required } from '@angular/forms/signals';
+
+type UserData = {
+  name: string;
+  lastname: string;
+  age: number;
+  note: string;
+};
 
 @Component({
   selector: 'app-root',
-  imports: [ReactiveFormsModule, 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">
-          <div>
-            <label
-              for="name"
-              class="mb-2 block text-sm font-medium text-gray-700">
-              Name
-              <span class="text-red-500">*</span>
-            </label>
-            <input
-              id="name"
-              type="text"
-              formControlName="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.border-red-500]="
-                form.controls.name.invalid && !form.controls.name.untouched
-              " />
-            @if (form.controls.name.invalid && !form.controls.name.untouched) {
-              <p class="mt-1 text-sm text-red-600">Name is required</p>
-            }
-          </div>
-
-          <div>
-            <label
-              for="lastname"
-              class="mb-2 block text-sm font-medium text-gray-700">
-              Last Name
-            </label>
-            <input
-              id="lastname"
-              type="text"
-              formControlName="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" />
-          </div>
-
-          <div>
-            <label
-              for="age"
-              class="mb-2 block text-sm font-medium text-gray-700">
-              Age
-            </label>
-            <input
-              id="age"
-              type="number"
-              formControlName="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.border-red-500]="
-                form.controls.age.invalid && !form.controls.age.untouched
-              " />
-            @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>
-            }
-          </div>
-
-          <div>
-            <label
-              for="note"
-              class="mb-2 block text-sm font-medium text-gray-700">
-              Note
-            </label>
-            <input
-              id="note"
-              type="text"
-              formControlName="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" />
-          </div>
-
-          <div class="flex gap-4">
-            <button
-              type="submit"
-              [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>
-            <button
-              type="button"
-              (click)="onReset()"
-              class="flex-1 rounded-md bg-gray-600 px-4 py-2 font-medium text-white transition hover:bg-gray-700">
-              Reset
-            </button>
-          </div>
-        </form>
-
-        @if (submittedData()) {
-          <div class="mt-8 rounded-lg border border-green-200 bg-green-50 p-4">
-            <h2 class="mb-2 text-lg font-semibold text-green-900">
-              Submitted Data:
-            </h2>
-            <pre
-              class="overflow-x-auto rounded border border-green-200 bg-white p-4 text-sm"
-              >{{ submittedData() | json }}</pre
-            >
-          </div>
-        }
-      </div>
-    </div>
-  `,
+  imports: [JsonPipe, FormField],
+  templateUrl: './app.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 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 }),
+  private readonly _initialData: UserData = {
+    name: '',
+    lastname: '',
+    age: NaN,
+    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 submittedData: WritableSignal<UserData | null> = signal(null);
 
-  submittedData: WritableSignal<{
-    name: string;
-    lastname: string;
-    age: number | null;
-    note: string;
-  } | null> = signal(null);
+  public onSubmit(event: Event): void {
+    event.preventDefault();
 
-  onSubmit(): void {
-    if (this.form.valid) {
-      this.submittedData.set(this.form.getRawValue());
-      console.log('Form submitted:', this.submittedData);
+    if (this.userForm().valid()) {
+      this.setSubmittedData();
     }
   }
 
-  onReset(): void {
-    this.form.reset();
-    this.submittedData.set(null);
+  public onReset(): void {
+    this.userForm().reset(this._initialData);
+    this.setSubmittedData();
+  }
+
+  private setSubmittedData(): void {
+    const formData = this._userModel();
+    console.log('Form submitted:', formData);
+    this.submittedData.set(formData);
   }
 }

From 3d62432edbdfd13c9420e2759b73ccaf41c45043 Mon Sep 17 00:00:00 2001
From: Tsironis Ioannis <gtsironis8@gmail.com>
Date: Tue, 10 Mar 2026 11:18:03 +0200
Subject: [PATCH 2/2] feat: use declarative code to submit the form

---
 .../src/app/app.component.html                |  3 +-
 .../src/app/app.component.ts                  | 45 ++++++++++++-------
 2 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/apps/forms/61-simplest-signal-form/src/app/app.component.html b/apps/forms/61-simplest-signal-form/src/app/app.component.html
index 748d4e96e..459385632 100644
--- a/apps/forms/61-simplest-signal-form/src/app/app.component.html
+++ b/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
diff --git a/apps/forms/61-simplest-signal-form/src/app/app.component.ts b/apps/forms/61-simplest-signal-form/src/app/app.component.ts
index 3970d91bd..cc827c4c9 100644
--- a/apps/forms/61-simplest-signal-form/src/app/app.component.ts
+++ b/apps/forms/61-simplest-signal-form/src/app/app.component.ts
@@ -5,18 +5,25 @@ 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,
 })
@@ -24,26 +31,30 @@ 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();