Signal Forms (Angular 21 Experimental)
Until version 20, Angular could manage forms in two ways: template-driven forms and reactive forms.
However, in version 21, an experimental version of the new Signal forms should be introduced.
Signal Forms are experimental
Signal forms are currently in the experimental phase and APIs could change very often.
Below you will find some snippets and interactive playgrounds that I have created for the purpose of sharing the tests I have done so far.
# Hello, Angular Signal Forms!
- 1
Create a signal
Create a signal using your data structure that represents the shape of the form.
- 2
Signal forms
Use the newformfunction to define the form and pass the signal as paremeter: - 3
Sync inputs with form fields
Use thecontrolproperty to sync a form control (i.e. an<input>) with a signal form field:
<Practice>
Click or in the editor to practice
PLAY
SNIPPET 1/1
src/app.ts
# Multiple Fields
We can create forms with multiple input fields and get the form value when submitted using
form().value():
PLAY
SNIPPET 1/1
src/app.ts
# Populate Forms
We don't need
setValue anymore.
Just update the signal to populate the form.or you can use the
set method of the form value property, that is always a signal:Interestingly, signal data and form value always remain synchronized
PLAY
SNIPPET 1/1
src/app.ts
# Form States: dirty and touched
At any moment we can know if an input field or the entire form is in a
dirty or touched state:
PLAY
SNIPPET 1/1
src/app.ts
# Simple Validations
As in previous versions, Angular provides built-in validators, such as:
and several others...
The
errors property provides an array with all the errors of a form field:and you can cycle on the array to show custom error messages:
Signal Forms provides two convenient
valid and invalid properties to know the status of the form and, for example, disable a button if the form is invalid:
PLAY
SNIPPET 1/1
src/app.ts
# Coming in the next days ...
The following examples will be available in next days.
Subscribe the newsletter or follow me on LinkedIn to know when they will be available
-
Custom Validation
-
Custom Async Validation
-
valueChanges vs computed
-
httpResource: fetch data
-
httpResource & Debounce
New
Membership Plan, italian only!
Accedi a TUTTI I CORSI PREMIUM ad un unico prezzo!
