With each new release, Angular continues to shift towards a more modern, reactive, and performance-oriented model. While some changes are highly visible, others are smaller. However, they all move the framework in the same direction: fewer legacy constraints, better defaults, and APIs that better reflect the way Angular applications are built today.
In Angular 22, one of the most talked-about features of the past year became stable, fitting perfectly into this narrative. Signal Forms, previously available as an experimental API, has now graduated to stable status.
With that transition came several important changes. While some of them may look minor at first glance, they directly affect how forms are structured and maintained in real-world Angular applications.
In this article, based on the new edition of our ebook, “The Ultimate Guide to Angular Evolution”, we’ll walk you through: what’s new, what it changes, and a new functionality that’ll help you introduce Signal Forms into your app without a full rewrite.
Key Takeaways:
- Signal Forms has reached stable status in Angular 22. It’s no longer experimental, but a production-ready standard for reactive form state in modern Angular apps.
- Several API updates improve how submissions, parsing, asynchronous validation, and custom control integration work in practice, making the API more predictable and expressive.
- Parse errors are now a first-class concept, separating invalid raw input from validation failures and making built-in form controls behave more safely.
- New options for async validation, including debouncing and manual re-triggering, give developers finer control over when and how validation runs.
SignalFormControlbridges Signal Forms and Reactive Forms, letting teams introduce signal-based behavior at the control level without rewriting existing form structures from scratch.- Gradual, bottom-up migration is now a realistic path. Teams can adopt Signal Forms incrementally, reusing their current architecture and updating forms one control at a time.
Signal Forms API updates
Challenge
Signal Forms has successfully transitioned from an experimental preview to a stable feature in Angular 22. This milestone follows a period during which Angular actively refined the API surface and developer experience based on real-world telemetry.
As teams start using them in more realistic scenarios, even smaller changes become important. For example, submissions need to be easier to configure, raw input needs to be handled more safely, asynchronous validation needs to be more finely controlled, and custom and native controls need to integrate more smoothly.
Solution
Angular makes a series of minor but practical improvements across the Signal Forms API.
Submission and form integration
The FormField directive replaced the Field directive, as [field] is a very generic name. The new FormRoot directive connects a FieldTree to a native <form> element. It simplifies Signal Forms submission by preventing the browser’s default submit behavior, setting the novalidate attribute, and delegating submission to Angular’s Signal Forms APIs.
Form-level submission defaults can now be configured directly in FormOptions via a submission property. This makes it easier to define common submit behavior once when creating the form. The same options object is accepted by the submit() helper function.
@Component({
selector: 'login-form',
template: `
<form [formRoot]="loginForm">
<input [formField]="loginForm.email" />
<input [formField]="loginForm.password" type="password" />
<button type="submit">Log in</button>
</form>
`,
imports: [FormField, FormRoot],
})
export class LoginForm {
private readonly _loginModel = signal<LoginFormModel>({
email: '',
password: '',
});
readonly loginForm = form(this._loginModel, {
submission: {
action: async () => {
// your submission logic
},
onInvalid: () => {
// notify user that form is invalid
},
},
});
}Safer parsing
Angular introduces parse errors as a first-class concept in Signal Forms, allowing invalid raw input to be represented separately from validation failures. That parsing model is also used for native inputs, which makes built-in form controls behave more safely when the user enters data that cannot yet be converted into a valid value. The number inputs also receive better null handling, which makes clearing and rebinding numeric fields behave more predictably and avoids awkward intermediate states.
More practical asynchronous validation
The validateAsync() and validateHttp() functions now have a new option called debounce that helps to stop the validation from happening too quickly while the user is typing. Angular also adds reloadValidation(), which lets developers manually run validation when the result depends on external state rather than direct changes to the field value itself. These additions make asynchronous validation easier to adjust and use in more flexible workflows.
Custom control integration
From now on, custom controls will need dirty, hidden, and pending inputs. This makes their contracts clearer and improves how they work when field bindings change. Angular also exposes the underlying element of the FormField directive, which is useful for connecting validation metadata to actual DOM behavior, such as focusing the correct control.
Benefits
Many of these changes are minor when considered individually. Together, however, they tell a more important story. Signal Forms are becoming more practical, expressive, and resilient in real-world applications.
While the steady stream of updates was once a reminder of the experimental nature of the API, these changes have now culminated in a stable and reliable API. The path to maturity has reached its destination, meaning that Signal Forms are no longer just an option to try out, but the basic standard for managing reactive states in Angular forms in the future.
SignalFormControl: Migrating to Signal Forms Gradually
Challenge
Although Signal Forms offer powerful capabilities, most teams work with existing applications that are built around Reactive Forms. In that context, rewriting an entire form just to adopt the new model is rarely practical. What many applications need instead is a way to gradually introduce signal-based behavior, without giving up the surrounding FormGroup structure and the existing forms infrastructure.
Solution
The SignalFormControl acts as a compatibility bridge between Signal Forms and Reactive Forms. It enables a signal-based control to be used within a standard FormGroup or FormArray while passing value, status, and validity information through the existing form hierarchy. Angular’s migration guide explicitly presents it as a bottom-up migration tool for moving leaf controls to Signals while keeping the parent form structure intact.
That makes it possible to use signal-based rules such as declarative validation, debouncing, and async validation in forms that are still otherwise built with Reactive Forms.
In other words, developers can adopt newer form capabilities where they matter most, without having to convert everything at once.
@Component({
selector: 'app-user-form',
imports: [ReactiveFormsModule],
template: `
<form [formGroup]="userForm">
<input formControlName="firstName" />
<input formControlName="lastName" />
<input formControlName="email" />
</form>
`,
})
export class UserFormComponent {
private readonly _fb = inject(FormBuilder);
readonly emailControl = new SignalFormControl<string>('', (path) => {
required(path, {
message: 'Email is required',
});
email(path, {
message: 'Provide a valid email address',
});
validateHttp(path, {
request: ({ value }) =>
`/api/check-username?username=${value()}`,
onSuccess: (response: { taken: boolean }) => {
if (response.taken) {
return {
kind: 'usernameTaken',
message: 'Username is already taken',
};
}
return null;
},
onError: () => ({
kind: 'networkError',
message: 'Could not verify username availability',
}),
});
});
readonly userForm = this._fb.nonNullable.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: this.emailControl,
});
}Benefits
SignalFormControl makes migrating existing applications to Signal Forms much more realistic. Teams can introduce signal-based validation and control logic in stages, reuse their current Reactive Forms architecture and update forms gradually, rather than undertaking a major rewrite. This reduces the risk of adoption while creating a much smoother path towards the newer signal-based forms model.
Summary
The stabilization of Signal Forms in Angular 22 marks an important shift. They are no longer an experimental API that developers can only explore on the side, but a production-ready approach to building forms in modern Angular applications.
The latest API updates make submissions, parsing, asynchronous validation, and custom control integration more predictable. At the same time, SignalFormControl removes one of the biggest barriers to adoption: the need to rewrite existing forms from scratch.
Ultimately, the most important change is not a single directive or function. It is that adopting Signal Forms has become both safer for new projects and much more realistic for existing applications.
And if you’re planning how your team should approach Signal Forms, our open Signal Forms workshop can help turn the new API into a practical adoption plan.
During the live, hands-on session, Team Leader at House of Angular and Google Developer Expert, Mateusz Stefańczyk, will cover migration strategies, advanced validation, custom controls, reusable schemas, and production-ready patterns.
The goal is to help you and your devs learn how to adopt Signal Forms with less risk and build a shared understanding of how to use them effectively in real projects.
Whether you want to master Signal Forms yourself or equip your team to use them confidently in real projects, this workshop will give you a clear path forward.
2 min
