Signal Forms – Quickly create Reactive Forms in Angular

Klicke hier, für die deutsche Version des Artikels.

Signal Forms in Angular 21: The Fastest Way to Reactive Forms

Signal Forms, as the name already states, use Angular signals instead of RxJS Observables to achieve the desired reactivity in forms. Using signals leads to simplified code and improved performance compared to the older Reactive Forms approach, while providing a simpler API to interact with than RxJS Observables.
Signal Forms are still in developer preview, but will be a helpful tool when stable. This article covers the basics of this newly added Angular feature, making you ready to use its advantages in your own applications!

If you want to learn more about the new Resource API and Angular in detail, visit one of our Angular courses:

• Angular Basic Training: https://www.thecodecampus.de/schulungen/angular
• Advanced Training: https://www.thecodecampus.de/schulungen/angular-advanced

Structure and Syntax of Signal-Based Forms

To create a Signal Form, you need the following parts:

• An interface describing how our data is shaped
• A signal holding this data
• Wrapping this signal in a form
• References to the Signal Form fields in the form template

The next section will then cover how to add validation to our Signal Form.

The Logic: TypeScript Setup and Signal Definition

So first, we define a datatype FormData:

Our form will ask the user for the following data:

• name of the user
• email of the user
• whether the user wants to receive a newsletter

Now, we can create our formSignal in our App component, using some default initial data:

and wrap it with the form function, to create our form:

This call to form creates a FieldTree object. This FieldTree represents the structure of our form as a tree and allows us to access every single form field through dot notation, and to possibly add validators and read validation errors. For more information, visit the Angular API documentation.

The Template: Integration into HTML Code

For now, this is all the TypeScript code that we need. All left to do is write markup for our form.

We define our form with 2 normal input fields for the name and email, and one checkbox for the newsletter subscription. To link these input fields to our Signal Form myForm, we use the formField directive, to bind each input to the corresponding signal in the FieldTree.

We also add a simple button into our form for submitting,

which uses the submit() function, so that we can test our Signal Form.

After entering some data and checking the console, we can see that our form automatically tracks the data given by the user, and we are ready to take the next step: validating the form input!

Reactive and type-safe: Validation with Signals

Of course, we also want to validate our form. How can we do this with Signal Forms? Fortunately, Signal Forms also provide access to built-in validators. This makes it very easy to define form validation: We just need to define, upon creating a form, how it should validate its fields, using the provided validators:

To specify the validation behavior, we additionally pass a function to the form function. This function receives the underlying signal of the form as an argument, and its body defines the validity checks we want to perform:

• A name is required
• An email address is required
• The given email address must be valid

We also provide a helpful error message for each validation check. We can now use the errors possibly generated by the Signal Form and display them to the user:

And voilà, we just created our first Signal Form with validation!

Signal Forms vs. Reactive Forms

To highlight why Signal Forms make writing forms easier, we implement the same form using the Reactive Forms approach. We create our Form using FormGroup and FormControl, providing initial data and validators:

And reference the form fields in the template:

Wait… This seems as easy as creating a Signal Form? Well yes, but that is due to the fact that we haven’t added our own reactivity to the form.

Why Signal Forms Are the Better Choice for Modern Apps

Imagine we want the email field only to be required if the user wants to receive the newsletter. We can add this to our Reactive Form by subscribing to the wantsNewsletter field and update the email validators upon change in the constructor of our form component:

This is the point where we have to deal with the underlying RxJS Observables of the Reactive Form. We have to be very careful to only subscribe to the observable as long as it is not destroyed, by calling takeUntilDestroyed, and updating the email validation state with updateValueAndValidity after changing the validators of the email field. This approach is error-prone and not as intuitive as the Signal Form approach, where we define the reactive validity together with our other validity rules:

We put the required and email validators inside a call to the applyWhen function. This function takes a field as a first argument, in our case the email field, which should be tested for validation only if a certain condition is met. This condition is specified by the second argument, in our case ({ valueOf }) => valueOf(signalRoot.wantsNewsletter), as we only want to validate the email field if the newsletter checkbox is checked. We have to use the valueOf function here, as the validation function has no direct access to the values of the form fields. The third argument of applyWhen specifies the validation behavior as before.

When we now uncheck the newsletter checkbox, we do not have to provide an email address.

To conclude, Signal Forms have many advantages over the older Reactive Forms. Using signals makes them not only faster, but as you have seen in the given example, the code is really easy to write and understand. The only downside of Signal Forms is, that they currently are still an experimental feature and the API may change. So use them with care in production environments until they become stable.

Experience is the best teacher: Hands-on with Signal Forms

Are you ready to put theory into practice? The Stackblitz includes examples not only for Signal Forms but also for Reactive Forms, so you can try everything out right away in one place.

What comes next?

Since Signal Forms have such a significant impact on developing reactive forms, we’ll continue to explore them in upcoming articles. We’ll look at how to use Signal Forms with custom controls and delve deeper into Signal Forms validation. You can also find an overview of all the latest articles and hot topics related to Angular in our Angular Guide.