feat(@angular/cli): add initial set of signal form examples #31134

clydin · 2025-09-08T13:52:14Z

This commit introduces a comprehensive set of 18 examples for the new signal-based forms functionality in Angular. These examples are designed to be used with the find_examples tool (MCP) to provide developers with actionable, real-world code snippets covering a wide range of use cases.

The find_examples tool is currently experimental and must be enabled using the -E find_examples option when running the ng mcp command.

The examples cover the following key concepts:

Core concepts and basic setup
Built-in and cross-field validation
Dynamic and conditional form structures
Custom form controls and reusable validators
Asynchronous operations and third-party integrations (Zod)
Best practices for testing, accessibility, and styling

This commit introduces a comprehensive set of 18 examples for the new signal-based forms functionality in Angular. These examples are designed to be used with the `find_examples` tool (MCP) to provide developers with actionable, real-world code snippets covering a wide range of use cases. The `find_examples` tool is currently experimental and must be enabled using the `-E find_examples` option when running the `ng mcp` command. The examples cover the following key concepts: - Core concepts and basic setup - Built-in and cross-field validation - Dynamic and conditional form structures - Custom form controls and reusable validators - Asynchronous operations and third-party integrations (Zod) - Best practices for testing, accessibility, and styling

samvloeberghs · 2025-09-14T21:32:13Z

packages/angular/cli/lib/examples/signal-forms/15-accessible-styled-forms.md

+      [control]="registrationForm.email"
+      [class.invalid]="registrationForm.email().invalid() && registrationForm.email().touched()"
+      [attr.aria-invalid]="registrationForm.email().invalid()"
+      aria-describedby="email-errors"


Suggested change

aria-describedby="email-errors"

[aria-errormessage]="registrationForm.email().invalid() && registrationForm.email().errors().length ? 'email-errors' : null"

samvloeberghs · 2025-09-14T21:36:04Z

packages/angular/cli/lib/examples/signal-forms/15-accessible-styled-forms.md

+
+- **`[class.invalid]`:** A class binding that applies a CSS class to an element when a condition is true. Here, it's used to style an input based on its validity.
+- **`touched` signal:** A signal on the `FieldState` that becomes `true` when the user has interacted with and then left the form control. This is useful for showing errors only after the user has had a chance to enter a value.
+- **`aria-describedby`:** An accessibility attribute that links a form control to the element that describes it, such as an error message. This allows screen readers to announce the error when the user focuses on the invalid input.


Suggested change

- **`aria-describedby`:** An accessibility attribute that links a form control to the element that describes it, such as an error message. This allows screen readers to announce the error when the user focuses on the invalid input.

- **`aria-errormessage`:** An accessibility attribute that links a form control to any related error messages. This allows screen readers to announce the error when the user focuses on the invalid input.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-errormessage

aria-describedby should be used as extension to the label / placeholder.
aria-errormessage is specifically for feedback on errors ( can be a space separated list of ids ) related to an object

samvloeberghs · 2025-09-14T21:36:50Z

packages/angular/cli/lib/examples/signal-forms/15-accessible-styled-forms.md

+
+- **Error Visibility:** Errors are only shown when a field is both `invalid` and `touched` (`@if (field().invalid() && field().touched())`). This provides a better user experience by not showing errors before the user has finished typing.
+- **Styling:** The `[class.invalid]` binding adds a red border to the input only when it's invalid and has been touched, providing clear visual feedback.
+- **Accessibility:** The `id` of the error message container is linked to the input via `aria-describedby`. This tells screen readers to announce the specific error message when the user focuses on the invalid input.


Suggested change

- **Accessibility:** The `id` of the error message container is linked to the input via `aria-describedby`. This tells screen readers to announce the specific error message when the user focuses on the invalid input.

- **Accessibility:** The `id` of the error message container is linked to the input via `aria-errormessage`. This tells screen readers to announce the specific error message when the user focuses on the invalid input.

samvloeberghs · 2025-09-14T21:37:34Z

packages/angular/cli/lib/examples/signal-forms/15-accessible-styled-forms.md

+      [control]="registrationForm.name"
+      [class.invalid]="registrationForm.name().invalid() && registrationForm.name().touched()"
+      [attr.aria-invalid]="registrationForm.name().invalid()"
+      aria-describedby="name-errors"


Suggested change

aria-describedby="name-errors"

[aria-errormessage]="registrationForm.name().invalid() && registrationForm.name().errors().length ? 'name-errors' : null"

aria-describedby should be used as extension to the label / placeholder.
aria-errormessage is specifically for feedback on errors ( can be a space separated list of ids ) related to an object

it should be ommitted (null) value if there are no errors, otherwise it refers to an id block that is empty or even unexisting.

This will need angular/angular#63748

JeanMeche · 2025-09-14T21:45:26Z

packages/angular/cli/lib/examples/signal-forms/15-accessible-styled-forms.md

+      type="text"
+      [control]="registrationForm.name"
+      [class.invalid]="registrationForm.name().invalid() && registrationForm.name().touched()"
+      [attr.aria-invalid]="registrationForm.name().invalid()"


This one will be supported once angular/angular#63748 gets in and is released

[attr.aria-invalid] is working right?
[aria-invalid] was not.

samvloeberghs · 2025-09-15T11:48:03Z

packages/angular/cli/lib/examples/signal-forms/01-basic-signal-form.md

+    </label>
+  </div>
+
+  <button type="submit">Submit</button>


Suggested change

<button type="submit">Submit</button>

<button>Submit</button>

submit is default

samvloeberghs · 2025-09-15T11:51:23Z

packages/angular/cli/lib/examples/signal-forms/03-cross-field-validation.md

+} from '@angular/forms/signals';
+import { JsonPipe } from '@angular/common';
+
+export interface PasswordForm {


I would rename this to just Password as this is the model, not the actual Form interface.

Suggested change

export interface PasswordForm {

export interface Password {

samvloeberghs · 2025-09-15T11:53:57Z

packages/angular/cli/lib/examples/signal-forms/03-cross-field-validation.md

+This file provides the template for the form, showing how to display errors for both field-level and cross-field validation rules.
+
+```html
+<form (submit)="handleSubmit(); $event.preventDefault()">


For the purpose of the example I think it's best to include the novalidate, because without native HTML5 form validation will kick in first.

Suggested change

<form (submit)="handleSubmit(); $event.preventDefault()">

<form (submit)="handleSubmit(); $event.preventDefault()" novalidate>

samvloeberghs · 2025-09-15T20:58:12Z

packages/angular/cli/lib/examples/signal-forms/15-accessible-styled-forms.md

+
+## Key Concepts
+
+- **`[class.invalid]`:** A class binding that applies a CSS class to an element when a condition is true. Here, it's used to style an input based on its validity.


a class is not really required here. The attribute selector [aria-invalid] can be used for styling it as an error.

samvloeberghs · 2025-09-17T10:44:21Z

packages/angular/cli/lib/examples/signal-forms/02-built-in-validators.md

+    }
+  </div>
+
+  <button type="submit" [disabled]="!settingsForm().valid()">Save Settings</button>


It is considered a bad pattern to disable buttons. It makes forms less accessible.
Plus, if the only way to submit the form is by clicking the button it's also not good. Entering for example will also submit the form if the submit handler on the form element is implemented.

Suggested change

<button type="submit" [disabled]="!settingsForm().valid()">Save Settings</button>

<button type="submit">Save Settings</button>

angular-robot bot added detected: feature PR contains a feature commit area: @angular/cli labels Sep 8, 2025

clydin force-pushed the mcp/signal-form-examples branch 2 times, most recently from 93f4632 to 0c84e42 Compare September 8, 2025 13:55

clydin added the target: major This PR is targeted for the next major release label Sep 8, 2025

clydin force-pushed the mcp/signal-form-examples branch 3 times, most recently from dd1d83d to 3653ee5 Compare September 8, 2025 23:10

clydin requested a review from mmalerba September 9, 2025 12:10

clydin force-pushed the mcp/signal-form-examples branch from 3653ee5 to 190a3a0 Compare September 11, 2025 14:18

samvloeberghs reviewed Sep 14, 2025

View reviewed changes

JeanMeche reviewed Sep 14, 2025

View reviewed changes

samvloeberghs reviewed Sep 15, 2025

View reviewed changes

samvloeberghs reviewed Sep 17, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(@angular/cli): add initial set of signal form examples #31134

feat(@angular/cli): add initial set of signal form examples #31134

Uh oh!

clydin commented Sep 8, 2025 •

edited

Loading

Uh oh!

samvloeberghs Sep 14, 2025

Uh oh!

samvloeberghs Sep 14, 2025

Uh oh!

samvloeberghs Sep 14, 2025

Uh oh!

samvloeberghs Sep 14, 2025

Uh oh!

samvloeberghs Sep 14, 2025

Uh oh!

samvloeberghs Sep 14, 2025

Uh oh!

samvloeberghs Sep 14, 2025

Uh oh!

samvloeberghs Sep 15, 2025

Uh oh!

JeanMeche Sep 14, 2025

Uh oh!

samvloeberghs Sep 15, 2025

Uh oh!

samvloeberghs Sep 15, 2025

Uh oh!

samvloeberghs Sep 15, 2025

Uh oh!

samvloeberghs Sep 15, 2025 •

edited

Loading

Uh oh!

samvloeberghs Sep 15, 2025

Uh oh!

samvloeberghs Sep 17, 2025

Uh oh!

Uh oh!

	aria-describedby="email-errors"
	[aria-errormessage]="registrationForm.email().invalid() && registrationForm.email().errors().length ? 'email-errors' : null"

	- `aria-describedby`: An accessibility attribute that links a form control to the element that describes it, such as an error message. This allows screen readers to announce the error when the user focuses on the invalid input.
	- `aria-errormessage`: An accessibility attribute that links a form control to any related error messages. This allows screen readers to announce the error when the user focuses on the invalid input.

	- Accessibility: The `id` of the error message container is linked to the input via `aria-describedby`. This tells screen readers to announce the specific error message when the user focuses on the invalid input.
	- Accessibility: The `id` of the error message container is linked to the input via `aria-errormessage`. This tells screen readers to announce the specific error message when the user focuses on the invalid input.

	aria-describedby="name-errors"
	[aria-errormessage]="registrationForm.name().invalid() && registrationForm.name().errors().length ? 'name-errors' : null"

	<button type="submit">Submit</button>
	<button>Submit</button>

	<form (submit)="handleSubmit(); $event.preventDefault()">
	<form (submit)="handleSubmit(); $event.preventDefault()" novalidate>


		## Key Concepts

		- `[class.invalid]`: A class binding that applies a CSS class to an element when a condition is true. Here, it's used to style an input based on its validity.

	<button type="submit" [disabled]="!settingsForm().valid()">Save Settings</button>
	<button type="submit">Save Settings</button>

feat(@angular/cli): add initial set of signal form examples #31134

Are you sure you want to change the base?

feat(@angular/cli): add initial set of signal form examples #31134

Uh oh!

Conversation

clydin commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

samvloeberghs Sep 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

clydin commented Sep 8, 2025 •

edited

Loading

samvloeberghs Sep 15, 2025 •

edited

Loading