Angular: From Zero to Expert

Angular: From Zero to Expert

Migrating to Signal Forms: The SignalFormControl Bridge in Angular 21.2

You don't have to rewrite all your forms at once. Angular 21.2 ships two interop tools that let you migrate one field — or one form — at a time.

Amos Isaila's avatar
Amos Isaila
Mar 14, 2026
∙ Paid
Angular 21.2.0: SignalFormControl

The Problem Nobody Talks About

Every time Angular introduces a new API, the community gets excited about greenfield projects. “Look how clean this is!” And it is clean. Signal forms are a genuine improvement over reactive forms — less boilerplate, better type safety, signals instead of observables.

But here’s the thing: most of us aren’t building new apps from scratch. We’re maintaining applications with dozens — sometimes hundreds — of reactive forms. Forms that work. Forms that are tested. Forms that have edge cases baked into them over years of production use.

The question isn’t “are signal forms better?” — they are. The question is: how do you get there without rewriting everything?

Angular 21.2 answers this with two interop tools:

  1. SignalFormControl — A signal-based control that extends AbstractControl, so it plugs directly into existing FormGroup and FormArray structures

  2. compatForm — A version of form() that accepts reactive FormControl instances as part of the data model

Both are exported from @angular/forms/signals/compat. Both are experimental. And both solve different migration scenarios.

Angular: From Zero to Expert is a reader-supported publication. To receive new posts and support my work, consider becoming a free or paid subscriber.

Understanding the Two Migration Paths

Before diving into code, it’s worth understanding when to use each approach.

SignalFormControl is for when you want to migrate individual fields inside an existing reactive form. You replace one FormControl with a SignalFormControl, and the parent FormGroup doesn’t even notice — it just sees an AbstractControl.

compatForm is for when you want to migrate the form itself to signal forms, but some fields are still FormControl instances that you’re not ready to convert yet.

Think of it this way:

  • I want to add signal validation to one field in my reactive form → SignalFormControlReactive form → signal field

  • I want to use form() but keep some existing FormControls → compatFormSignal form → reactive fields

Most teams will start with SignalFormControl because it’s the least disruptive. You change one field, ship it, observe, then do the next one.

SignalFormControl: Your First Migration Step

What It Is

SignalFormControl extends AbstractControl — the same base class that FormControl, FormGroup, and FormArray extend. This means it’s a drop-in replacement anywhere Angular’s reactive forms infrastructure expects a control.

Internally, it’s backed by a WritableSignal<T> and a signal forms FieldTree. It translates between the two worlds: when the reactive form reads .value, it gets the signal’s current value. When signal forms validation runs, the results are exposed through the reactive .errors getter.

import { SignalFormControl } from '@angular/forms/signals/compat';
User's avatar

Continue reading this post for free, courtesy of Amos Isaila.

Or purchase a paid subscription.
© 2026 Amos Isaila · Privacy ∙ Terms ∙ Collection notice
Start your SubstackGet the app
Substack is the home for great culture