Migration vers Signal Forms dans Angular 22 : guide pratique

Angular 22, sorti en juin 2026, marque l'entrée officielle dans l'ère Signal-First. Les Signal Forms passent stable, le mode Zoneless est officiellement recommandé, et les Selectorless Components simplifient la composition de templates. C'est l'une des releases les plus structurantes d'Angular depuis l'introduction des Signals en v16.

Dans cet article, je me concentre sur les Signal Forms : pourquoi c'est important, ce que ça change concrètement, et comment aborder la migration depuis vos Reactive Forms existants.

Pourquoi les Signal Forms changent la donne

Le problème avec Reactive Forms

Avec le modèle ReactiveFormsModule, chaque modification d'un champ déclenche une réévaluation de l'arbre complet de FormGroup. Angular parcourt la hiérarchie du formulaire, recalcule les états de validité, les statuts dirty/pristine/touched, et notifie tous les abonnés valueChanges et statusChanges.

Sur un formulaire simple, c'est invisible. Sur un formulaire métier de 30 à 50 champs avec des validators croisés et asynchrones, cela génère des cycles de détection inutiles — surtout si vous êtes encore sur Zone.js.

La promesse des Signal Forms

Les Signal Forms reposent sur la réactivité fine-grained (granulaire) : seul le Signal correspondant au champ modifié est mis à jour, et uniquement les parties du template qui dépendent de ce Signal sont re-rendues.

Concrètement :

Vous modifiez le champ email → seul le composant lié à email est mis à jour.
Les 49 autres champs ne bougent pas.
Couplé au mode Zoneless (pas de Zone.js pour intercepter les events), les cycles de détection deviennent entièrement contrôlés par vous.

Sur un formulaire de saisie métier que j'ai migré, j'ai mesuré -40% de re-renders avec Angular DevTools après migration Signal Forms + Zoneless.

La nouvelle API Signal Forms

Avant (Reactive Forms)

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({...})
export class InvoiceFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      clientName: ['', [Validators.required, Validators.minLength(2)]],
      amount: [0, [Validators.required, Validators.min(0)]],
      email: ['', [Validators.required, Validators.email]],
    });
  }
}

Après (Signal Forms — Angular 22)

import { signalForm, signalControl, Validators } from '@angular/forms';

@Component({...})
export class InvoiceFormComponent {
  form = signalForm({
    clientName: signalControl('', {
      validators: [Validators.required, Validators.minLength(2)]
    }),
    amount: signalControl(0, {
      validators: [Validators.required, Validators.min(0)]
    }),
    email: signalControl('', {
      validators: [Validators.required, Validators.email]
    }),
  });
}

Dans le template, accéder à la valeur d'un champ se fait via un Signal :

<!-- Avant -->
<input [formControl]="form.get('email')">
<span *ngIf="form.get('email')?.errors?.['required']">Email requis</span>

<!-- Après -->
<input [signalControl]="form.controls.email">
<span *ngIf="form.controls.email.errors()?.['required']">Email requis</span>

Notez l'appel de fonction errors() — c'est un Signal, pas une propriété statique.

Les pièges à connaître avant de migrer

1. Pas de schematic automatique

Contrairement à certaines migrations Angular (comme ng update), il n'existe pas de schematic officiel pour convertir vos Reactive Forms en Signal Forms. La migration est manuelle.

Prévoyez du temps, surtout pour les formulaires complexes avec :

Des validators croisés (un champ conditionne la validation d'un autre)
Des validators asynchrones (appels HTTP pour vérifier l'unicité d'un email, par exemple)
Des FormArrays dynamiques

2. Les validators asynchrones ont une nouvelle signature

En Reactive Forms, un validator asynchrone est une fonction AsyncValidatorFn qui retourne un Observable<ValidationErrors | null>.

En Signal Forms, les validators asynchrones s'expriment sous forme de ressources Signal :

// Avant
const emailUniqueValidator: AsyncValidatorFn = (control) =>
  this.userService.checkEmail(control.value).pipe(
    map(exists => exists ? { emailTaken: true } : null)
  );

// Après
emailSignalControl = signalControl('', {
  asyncValidators: [
    (value) => resource({
      request: value,
      loader: ({ request }) => this.userService.checkEmail(request)
        .then(exists => exists ? { emailTaken: true } : null)
    })
  ]
});

C'est plus verbeux au début, mais le comportement est plus prévisible et plus facile à déboguer.

3. FormArray → signalFormArray

Les tableaux dynamiques de formulaires (FormArray) ont leur équivalent Signal :

items = signalFormArray(
  initialItems.map(item => signalForm({ name: signalControl(item.name) }))
);

L'API est cohérente mais nécessite de réécrire les helpers qui manipulaient vos FormArrays.

Stratégie de migration recommandée

Ne pas tout migrer d'un coup

C'est le piège classique. Reactive Forms et Signal Forms coexistent dans la même application. Profitez-en.

Approche progressive :

Identifier les formulaires prioritaires — commencez par les formulaires simples (login, recherche) pour vous familiariser avec l'API.
Migrer les formulaires complexes en dernier — une fois que l'équipe est à l'aise avec les Signal Forms et les nouveaux validators.
Combiner avec la migration Zoneless — si vous n'avez pas encore activé le mode Zoneless (provideZonelessChangeDetection()), c'est le bon moment. Les deux features se complètent parfaitement.

Checklist de migration par formulaire

Remplacer FormBuilder par signalForm + signalControl
Convertir les validators synchrones (API identique, compatible)
Réécrire les validators asynchrones avec l'API resource
Mettre à jour les templates (formControl → signalControl, accès aux erreurs via errors())
Supprimer l'import de ReactiveFormsModule si le formulaire est isolé
Mesurer avec Angular DevTools avant/après

Angular 22 : un LTS candidate, le bon moment pour migrer

Angular 22 est proposé comme Long-Term Support candidate, ce qui signifie un support étendu pour les équipes qui l'adoptent. Si vous planifiez vos roadmaps techniques pour les 2-3 prochaines années, c'est la version vers laquelle orienter vos nouvelles features et vos migrations.

Les Signal Forms ne sont pas une simple nouveauté syntaxique — ils représentent un changement de paradigme dans la façon dont Angular gère la réactivité. Combinés au mode Zoneless et aux Selectorless Components (aussi stables en v22), ils constituent le socle de l'Angular moderne.

La migration demande un investissement, mais les gains en performance et en lisibilité du code en valent la peine — surtout sur les applications métier à formulaires complexes.

Signal Forms dans Angular 22 : guide pratique.