docs(forms): fix broken snippets and wrong statements in the signal forms guides

- async-operations: return headers and timeout from the `validateHttp`
  `request` function (they are `HttpResourceRequest` properties, not
  `httpResource` options), and fix the invalid object literal in the
  `parse` example.
- validation: remove a stray `|` from a component snippet, fix the
  "multiple errors" example (`a@b` is a valid email address for the
  `email()` validator, `a@` isn't), rename `field` to `fieldTree` in the
  `FieldContext` table, add the missing `signal` import, use one zod
  import style, and clarify that dynamic schemas are passed as a function.
- custom-controls: `DisabledReason` exposes `fieldTree`, not `field`.
- migration: use `extractValue()` to get the whole form value instead of
  building it manually, and fix the expected output.
- form-logic: refer to the `FormField` directive by name, release the
  timer when the `debounce` example is aborted, and add the missing
  `form` import.
- comparison example: submit through `FormRoot` and a `submission`
  action, so the page no longer reloads on submit.

Author: MeAkib

adev/src/content/examples/signal-forms/src/comparison/app/signal-forms.ts

@@ -1,11 +1,11 @@
 import {Component, signal} from '@angular/core';
-import {email, form, FormField, minLength, required} from '@angular/forms/signals';
+import {email, form, FormField, FormRoot, minLength, required} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-login',
-  imports: [FormField],
+  imports: [FormField, FormRoot],
   template: `
-    <form (submit)="onSubmit()">
+    <form [formRoot]="loginForm">
       <div>
         <label>
           Email
@@ -30,7 +30,7 @@ import {email, form, FormField, minLength, required} from '@angular/forms/signal
         }
       </div>
 
-      <button type="submit" [disabled]="loginForm().invalid()">Sign In</button>
+      <button type="submit">Sign In</button>
     </form>
   `,
 })
@@ -40,18 +40,22 @@ export class LoginComponent {
     password: '',
   });
 
-  loginForm = form(this.loginModel, (fieldPath) => {
-    required(fieldPath.email, {message: 'Email is required'});
-    email(fieldPath.email, {message: 'Enter a valid email address'});
+  loginForm = form(
+    this.loginModel,
+    (fieldPath) => {
+      required(fieldPath.email, {message: 'Email is required'});
+      email(fieldPath.email, {message: 'Enter a valid email address'});
 
-    required(fieldPath.password, {message: 'Password is required'});
-    minLength(fieldPath.password, 8, {message: 'Password must be at least 8 characters'});
-  });
-
-  onSubmit() {
-    if (this.loginForm().valid()) {
-      const credentials = this.loginModel();
-      console.log('Submitting:', credentials);
-    }
-  }
+      required(fieldPath.password, {message: 'Password is required'});
+      minLength(fieldPath.password, 8, {message: 'Password must be at least 8 characters'});
+    },
+    {
+      submission: {
+        // Only runs when the form is valid.
+        action: async (field) => {
+          console.log('Submitting:', field().value());
+        },
+      },
+    },
+  );
 }

adev/src/content/guide/forms/signals/async-operations.md

@@ -180,7 +180,7 @@ onSuccess: (response: { usernameTaken: boolean; profanity: boolean }) => {
 } // prettier-ignore
 ```
 
-The type for `onSuccess` can be specified either directly in the parameter, or with the `parse` property of `validateHttp`'s `options`
+The type for `onSuccess` can be specified either directly in the parameter, or with the `parse` property of `validateHttp`'s `options`.
 
 ```ts
 onSuccess: (response: { usernameTaken: boolean; profanity: boolean }) => {
@@ -190,8 +190,8 @@ onSuccess: (response: { usernameTaken: boolean; profanity: boolean }) => {
 // or
 
 options: {
-  parse: (response) => response as {usernameTaken: boolean; profanity: boolean};
-}
+  parse: (response) => response as {usernameTaken: boolean; profanity: boolean},
+},
 onSuccess: (response) => {
   // ...
 } // prettier-ignore
@@ -211,19 +211,19 @@ onError: (error) => {
 
 ### HTTP options
 
-Customize the HTTP request with the `options` parameter:
+Customize the HTTP request by returning an `HttpResourceRequest` object from `request` instead of a URL:
 
 ```ts
 import {HttpHeaders} from '@angular/common/http';
 
 validateHttp(schemaPath.field, {
-  request: ({value}) => `/api/validate?value=${value()}`,
-  options: {
+  request: ({value}) => ({
+    url: `/api/validate?value=${value()}`,
     headers: new HttpHeaders({
       Authorization: 'Bearer token',
     }),
     timeout: 5000,
-  },
+  }),
   onSuccess: (response: {valid: boolean}) =>
     response.valid
       ? null
@@ -238,7 +238,7 @@ validateHttp(schemaPath.field, {
 });
 ```
 
-TIP: See the [httpResource API documentation](api/common/http/httpResource) for all available options.
+TIP: See the [`HttpResourceRequest` API documentation](api/common/http/HttpResourceRequest) for all available request properties, and the [httpResource API documentation](api/common/http/httpResource) for the `options` parameter.
 
 ## Custom async validation with validateAsync()
 

adev/src/content/guide/forms/signals/custom-controls.md

@@ -175,7 +175,7 @@ Control whether users can interact with your field:
 | `readonly`        | Whether the field is readonly (visible but not editable) |
 | `hidden`          | Whether the field is hidden from view                    |
 
-NOTE: `disabledReasons` is an array of `DisabledReason` objects. Each object has a `field` property (reference to the field tree) and an optional `message` property. Access the message via `reason.message`.
+NOTE: `disabledReasons` is an array of `DisabledReason` objects. Each object has a `fieldTree` property (reference to the field tree) and an optional `message` property. Access the message via `reason.message`.
 
 #### Validation constraints
 

adev/src/content/guide/forms/signals/form-logic.md

@@ -262,7 +262,7 @@ export class Profile {
 
 ## Display uneditable fields with `readonly()`
 
-The `readonly()` rule prevents users from updating a field. The `[FormField]` directive automatically binds this state to the HTML `readonly` attribute, which prevents editing while still allowing users to focus and select text.
+The `readonly()` rule prevents users from updating a field. The `FormField` directive automatically binds this state to the HTML `readonly` attribute, which prevents editing while still allowing users to focus and select text.
 
 NOTE: Readonly fields skip [validation](guide/forms/signals/validation).
 
@@ -301,7 +301,7 @@ export class Account {
 }
 ```
 
-The `[FormField]` directive automatically binds the `readonly` attribute based on the field's state.
+The `FormField` directive automatically binds the `readonly` attribute based on the field's state.
 
 ### Conditional readonly
 
@@ -457,10 +457,18 @@ export class Search {
   });
 
   searchForm = form(this.searchModel, (schemaPath) => {
-    debounce(schemaPath.query, () => {
-      // Return a promise that resolves after 500ms
+    debounce(schemaPath.query, (context, abortSignal) => {
+      // Return a promise that resolves after 500ms, or right away when the debounce is aborted
       return new Promise<void>((resolve) => {
-        setTimeout(() => resolve(), 500);
+        const timeoutId = setTimeout(resolve, 500);
+        abortSignal.addEventListener(
+          'abort',
+          () => {
+            clearTimeout(timeoutId);
+            resolve();
+          },
+          {once: true},
+        );
       });
     });
   });
@@ -695,7 +703,7 @@ The conditional rules only run when the condition is true. This is useful for co
 Extract common rule configurations into reusable functions:
 
 ```ts
-import {SchemaPath, debounce, metadata, maxLength} from '@angular/forms/signals';
+import {SchemaPath, debounce, form, metadata, maxLength} from '@angular/forms/signals';
 import {PLACEHOLDER} from './metadata-keys';
 
 function emailFieldConfig(path: SchemaPath<string>) {

adev/src/content/guide/forms/signals/migration.md

@@ -196,13 +196,12 @@ form.password().value(); // 'password'
 form().value(); // { email: '', password: FormControl}
 ```
 
-If you need the whole form value, you'd have to build it manually:
+If you need the whole form value with the controls unwrapped, use `extractValue` from `@angular/forms/signals/compat`:
 
 ```typescript
-const formValue = computed(() => ({
-  email: form.email().value(),
-  password: form.password().value(),
-})); // {email: '', password: ''}
+import {extractValue} from '@angular/forms/signals/compat';
+
+const formValue = computed(() => extractValue(form)); // {email: '', password: 'password'}
 ```
 
 ## Bottom-up migration

adev/src/content/guide/forms/signals/validation.md

@@ -435,7 +435,7 @@ signupForm = form(this.signupModel, (schemaPath) => {
 });
 ```
 
-If the email field is empty, only the `required()` error appears. If the user types "a@b", both `email()` and `minLength()` errors appear. All validation rules run - validation doesn't stop after the first failure.
+If the email field is empty, only the `required()` error appears. If the user types "a@", both `email()` and `minLength()` errors appear. All validation rules run - validation doesn't stop after the first failure.
 
 TIP: Use the `touched() && invalid()` pattern in your templates to prevent errors from appearing before users have interacted with a field. For comprehensive guidance on displaying validation errors, see the [Field State Management guide](guide/forms/signals/field-state-management#conditional-error-display).
 
@@ -492,7 +492,7 @@ The validator function receives a `FieldContext` object with:
 | --------------- | ---------- | ------------------------------------------- |
 | `value`         | Signal     | Signal containing the current field value   |
 | `state`         | FieldState | The field state reference                   |
-| `field`         | FieldTree  | The field tree reference                    |
+| `fieldTree`     | FieldTree  | The field tree reference                    |
 | `valueOf()`     | Method     | Get the value of another field by path      |
 | `stateOf()`     | Method     | Get the state of another field by path      |
 | `fieldTreeOf()` | Method     | Get the field tree of another field by path |
@@ -668,7 +668,7 @@ import {Component, signal} from '@angular/core';
 import {form, FormField, required, validateHttp} from '@angular/forms/signals';
 
 @Component({
-  selector: 'app-username-form',|
+  selector: 'app-username-form',
   imports: [FormField],
   template: `
     <form novalidate>
@@ -734,6 +734,7 @@ The `valid()` signal returns `false` while validation is pending, even if there
 Signal Forms have built-in support for libraries that conform to [Standard Schema](https://standardschema.dev/) like [Zod](https://zod.dev/) or [Valibot](https://valibot.dev/). The integration is provided via the `validateStandardSchema` function. This allows you to use existing schemas while maintaining Signal Forms' reactive validation benefits.
 
 ```ts
+import {signal} from '@angular/core';
 import {form, validateStandardSchema} from '@angular/forms/signals';
 import * as z from 'zod';
 
@@ -751,12 +752,12 @@ const userForm = form(signal({email: '', password: ''}), (schemaPath) => {
 
 ### Dynamic schemas
 
-You can pass a signal instead of a static schema so the validation schema updates automatically when its dependencies change.
+Instead of a static schema, you can pass a function that returns the schema. The validation then updates automatically when the signals read by the function change.
 
 ```angular-ts
 import {Component, computed, signal} from '@angular/core';
 import {form, FormField, validateStandardSchema} from '@angular/forms/signals';
-import z from 'zod';
+import * as z from 'zod';
 
 @Component({/* ... */})
 export class DynamicSchema {