Les formulaires avec les signals Angular

Les Signal Forms sont une library qui vous permet de gérer l'état des formulaires dans les applications Angular en s'appuyant sur la base réactive des signals. Grâce au two-way binding automatique, à l'accès typé aux champs et à la validation par schéma, les Signal Forms vous aident à créer des formulaires robustes.

Pourquoi les Signal Forms ?

Créer des formulaires dans une application web implique de gérer plusieurs aspects interdépendants : suivre les valeurs des champs, valider les saisies de l'utilisateur, gérer les états d'erreur et garder l'interface synchronisée avec votre modèle de données. Gérer ces aspects séparément entraîne du code répétitif et de la complexité.

Les Signal Forms répondent à ces défis en :

• Synchronisant l'état automatiquement - Synchronise automatiquement le model de données du formulaire avec les champs de formulaire liés
• Garantissant la sûreté du typage - Prend en charge des schémas et des bindings entièrement typés entre vos contrôles d'interface et votre modèle de données
• Centralisant la logique de validation - Définissez toutes les règles de validation en un seul endroit grâce à un schéma de validation

Les Signal Forms sont particulièrement adaptés aux nouvelles applications construites avec les signals. Si vous travaillez sur une application existante qui utilise les reactive forms, les reactive forms restent un choix solide.

Prérequis

Les Signal Forms nécessitent :

• Angular v21 ou supérieur

Mise en place

Les Signal Forms sont déjà inclus dans le package @angular/forms. Importez les fonctions et directives nécessaires depuis @angular/forms/signals :

import {form, FormField, required, email} from '@angular/forms/signals';

La directive FormField doit être importée dans tout composant qui lie des champs de formulaire à des éléments HTML de saisie :

@Component({
  // ...
  imports: [FormField],
})

Prochaines étapes

Pour en savoir plus sur le fonctionnement des Signal Forms, consultez les guides suivants :