Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

mmalerba
Copy link
Contributor

This commit introduces an experimental version of a new signal-based forms API for Angular. This new API aims to explore how signals can be leveraged to create a more declarative, intuitive, and reactive way of handling forms.

The primary goals of this new signal-based approach are:

  • Signal-centric Design: Place signals at the core of the forms experience, enabling a truly reactive programming model for form state and logic.
  • Declarative Logic: Allow developers to define form behavior, such as validation and conditional fields, declaratively using TypeScript. This moves logic out of the template and into a typed, testable schema.
  • Developer-Owned Data Model: The library does not maintain a copy of data in a form model, but instead read and write it via a developer-provided WritableSignal, eliminating the need for applications to synchronize their data with the form system.
  • Interoperability: A key design goal is seamless interoperability with existing reactive forms, allowing for incremental adoption.
  • Bridging Template and Reactive Forms: This exploration hopes to close the gap between template and reactive forms, offering a unified and more powerful approach that combines the best aspects of both.

This initial version of the experimental API includes the core building blocks, such as the form() function, Field and FieldState objects, and a [control] directive for binding to UI elements. It also introduces a schema-based system for defining validation, conditional logic, and other form behaviors.

Note: This is an early, experimental API. It is not yet complete and is subject to change based on feedback and further exploration.

Closes #63293

@mmalerba mmalerba added area: forms target: major This PR is targeted for the next major release labels Aug 26, 2025
@ngbot ngbot bot added this to the Backlog milestone Aug 26, 2025
@pullapprove pullapprove bot requested review from josephperrott August 26, 2025 22:21
@angular-robot angular-robot bot added the detected: feature PR contains a feature commit label Aug 26, 2025
@angular angular deleted a comment from google-cla bot Aug 26, 2025
@mmalerba mmalerba added the merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note label Aug 26, 2025
@mmalerba
Copy link
Contributor Author

CARETAKER NOTE: patch cl/799748224

@mmalerba mmalerba added the action: merge The PR is ready for merge by the caretaker label Aug 26, 2025
@mmalerba mmalerba changed the title feat(forms): Add signal-based forms feat(forms): add experimental signal-based forms Aug 26, 2025
Copy link
Member

@josephperrott josephperrott left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@pullapprove pullapprove bot requested a review from atscott August 27, 2025 13:59
@mmalerba mmalerba force-pushed the signal-forms branch 5 times, most recently from 34ae012 to 4fd8b0a Compare August 27, 2025 21:30
@mmalerba mmalerba added target: major This PR is targeted for the next major release and removed target: major This PR is targeted for the next major release labels Aug 27, 2025
Copy link
Member

@alxhub alxhub left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed-for: public-api

@pullapprove pullapprove bot requested a review from thePunderWoman August 27, 2025 23:24
Copy link
Contributor

@AndrewKushnir AndrewKushnir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed-for: public-api

This commit introduces an experimental version of a new signal-based forms API for Angular. This new API aims to explore how signals can be leveraged to create a more declarative, intuitive, and reactive way of handling forms.

The primary goals of this new signal-based approach are:

*   **Signal-centric Design:** Place signals at the core of the forms experience, enabling a truly reactive programming model for form state and logic.
*   **Declarative Logic:** Allow developers to define form behavior, such as validation and conditional fields, declaratively using TypeScript. This moves logic out of the template and into a typed, testable schema.
*   **Developer-Owned Data Model:** The library does not maintain a copy of data in a form model, but instead read and write it via a developer-provided `WritableSignal`, eliminating the need for applications to synchronize their data with the form system.
*   **Interoperability:** A key design goal is seamless interoperability with existing reactive forms, allowing for incremental adoption.
*   **Bridging Template and Reactive Forms:** This exploration hopes to close the gap between template and reactive forms, offering a unified and more powerful approach that combines the best aspects of both.

This initial version of the experimental API includes the core building blocks, such as the `form()` function, `Field` and `FieldState` objects, and a `[control]` directive for binding to UI elements. It also introduces a schema-based system for defining validation, conditional logic, and other form behaviors.

Note: This is an early, experimental API. It is not yet complete and is subject to change based on feedback and further exploration.

Co-authored-by: Kirill Cherkashin <[email protected]>
Co-authored-by: Alex Rickabaugh <[email protected]>
Co-authored-by: Leon Senft <[email protected]>
Co-authored-by: Dylan Hunn <[email protected]>
Co-authored-by: Michael Small <[email protected]>
@mmalerba
Copy link
Contributor Author

This PR was merged into the repository. The changes were merged into the following branches:

@mmalerba mmalerba closed this in b8314bd Aug 28, 2025
@naveedahmed1
Copy link
Contributor

Awesome work, Angular team 🚀 Is there a quick start guide or some beginner docs I can check out?

@mishahrokhola
Copy link

Excellent work! You've managed to address all the common form issues we faced before. I'm really excited to try this out. Thanks to the Angular team! 🔥

@mmalerba
Copy link
Contributor Author

Thanks for your enthusiasm! We're still working on the docs 🙂

@naveedahmed1
Copy link
Contributor

Awesome, meanwhile this could be helpful: https://medium.com/mustakbil/angular-signal-forms-deep-dive-build-smarter-forms-with-new-signal-forms-api-in-angular-21-1feb15a68403
(may contains errors and requires fixes :D)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
action: merge The PR is ready for merge by the caretaker area: forms detected: feature PR contains a feature commit merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note target: major This PR is targeted for the next major release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants