docs: add signal forms validation guide

Author: bencodezen

adev/src/app/routing/sub-navigation-data.ts

@@ -447,6 +447,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
                 path: 'guide/forms/signals/field-state-management',
                 contentPath: 'guide/forms/signals/field-state-management',
               },
+              {
+                label: 'Validation',
+                path: 'guide/forms/signals/validation',
+                contentPath: 'guide/forms/signals/validation',
+              },
               {
                 label: 'Comparison with other form systems',
                 path: 'guide/forms/signals/comparison',

adev/src/content/examples/signal-forms/src/login-simple/index.html

@@ -0,0 +1,70 @@
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 400px;
+  padding: 1rem;
+  font-family:
+    Inter,
+    system-ui,
+    -apple-system,
+    sans-serif;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-weight: 500;
+}
+
+input {
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 1rem;
+  font-family: inherit;
+}
+
+input:focus {
+  outline: none;
+  border-color: #4285f4;
+}
+
+button {
+  padding: 0.75rem 1.5rem;
+  background-color: #4285f4;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+button:hover {
+  background-color: #357ae8;
+}
+
+button:active {
+  background-color: #2a65c8;
+}
+
+.error-list {
+  color: red;
+  font-size: 0.875rem;
+  margin: 0.25rem 0 0 0;
+  padding-left: 0;
+  list-style-position: inside;
+}
+
+.error-list li {
+  margin: 0;
+}

adev/src/content/examples/signal-forms/src/login-simple/main.ts

@@ -0,0 +1,33 @@
+<form (submit)="onSubmit($event)">
+  <div>
+    <label>
+      Email:
+      <input type="email" [field]="loginForm.email" />
+    </label>
+
+    @if (loginForm.email().touched() && loginForm.email().invalid()) {
+      <ul class="error-list">
+        @for (error of loginForm.email().errors(); track error) {
+          <li>{{ error.message }}</li>
+        }
+      </ul>
+    }
+  </div>
+
+  <div>
+    <label>
+      Password:
+      <input type="password" [field]="loginForm.password" />
+    </label>
+
+    @if (loginForm.password().touched() && loginForm.password().invalid()) {
+      <ul class="error-list">
+        @for (error of loginForm.password().errors(); track error) {
+          <li>{{ error.message }}</li>
+        }
+      </ul>
+    }
+  </div>
+
+  <button type="submit" [disabled]="loginForm().invalid()">Log In</button>
+</form>

adev/src/content/examples/signal-forms/src/login-validation-complete/app/app.css

@@ -0,0 +1,38 @@
+import {Component, signal, ChangeDetectionStrategy} from '@angular/core';
+import {form, Field, required, email, submit} from '@angular/forms/signals';
+
+interface LoginData {
+  email: string;
+  password: string;
+}
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
+  imports: [Field],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class App {
+  loginModel = signal<LoginData>({
+    email: '',
+    password: '',
+  });
+
+  loginForm = form(this.loginModel, (schemaPath) => {
+    required(schemaPath.email, {message: 'Email is required'});
+    email(schemaPath.email, {message: 'Enter a valid email address'});
+
+    required(schemaPath.password, {message: 'Password is required'});
+  });
+
+  onSubmit(event: Event) {
+    event.preventDefault();
+    submit(this.loginForm, async () => {
+      const credentials = this.loginModel();
+      // In a real app, this would be async:
+      // await this.authService.login(credentials);
+      console.log('Logging in with:', credentials);
+    });
+  }
+}

adev/src/content/examples/signal-forms/src/login-validation-complete/app/app.html

@@ -5,7 +5,7 @@
       <input type="email" [field]="loginForm.email" />
     </label>
 
-    @if (loginForm.email().invalid()) {
+    @if (loginForm.email().touched() && loginForm.email().invalid()) {
       <ul class="error-list">
         @for (error of loginForm.email().errors(); track $index) {
           <li>{{ error.message }}</li>
@@ -20,7 +20,7 @@
       <input type="password" [field]="loginForm.password" />
     </label>
 
-    @if (loginForm.password().invalid()) {
+    @if (loginForm.password().touched() && loginForm.password().invalid()) {
       <div class="error">
         @for (error of loginForm.password().errors(); track $index) {
           <p>{{ error.message }}</p>

adev/src/content/examples/signal-forms/src/login-validation-complete/app/app.ts

@@ -1,5 +1,5 @@
 import {Component, signal, ChangeDetectionStrategy} from '@angular/core';
-import {form, Field, required, email, debounce} from '@angular/forms/signals';
+import {form, Field, required, email} from '@angular/forms/signals';
 
 interface LoginData {
   email: string;
@@ -20,11 +20,9 @@ export class App {
   });
 
   loginForm = form(this.loginModel, (schemaPath) => {
-    debounce(schemaPath.email, 500);
     required(schemaPath.email, {message: 'Email is required'});
     email(schemaPath.email, {message: 'Enter a valid email address'});
 
-    debounce(schemaPath.password, 500);
     required(schemaPath.password, {message: 'Password is required'});
   });