Angular – Démystifier les formulaires Réactifs (Reactive Form)

L’ajout de formulaire dans une application et quasiment inévitable. Angular propose deux modules spécialisés pour la gestion des formulaires. Je vos présents ici une utilisation simple et compréhensible des Reactive Form pour que vous puissiez enfin maitriser correctement les formulaires avec Angular.

Angular et les formulaires

Comme vous avez certainement pu le découvrir lors de votre formation ou de votre parcours initiatique sur Angular, le framework propose deux modules spécialiser et dédier à la gestion des formulaires. Il s’agit des modules « FormsModule » et « ReactiveFormsModule« . Ceux-ci permettent de générer et de piloter chaque element du formulaire. Mais avant d’aller plus loin, je vais vous réexpliquer la principle différence entre les deux modules qu’Angular nous met à disposition pour créer notre formulaire.

Template Driven ou Reactive Form?

Comme expliqué plus haut, Angular propose deux modules pour la gestion des formulaires. Ces deux modules font en gros le même boulot mais c’est lors de la conception que l’on retrouvera le plus de différence.

En effet, les Reactive Form permettent un contrôle plus fin de chaque element du formulaire. Cela est très pratique pour la validation et autres opérations que vous serez amené à effectuer lors du développement d’une véritable application.

Alors quel module faut-il utiliser pour créer des formulaires dans Angular?

Il y en a qui ne vont pas aimer ma réponse mais peu importe, ils changeront d’avis avec le temps vous verrez.

Bon, le choix est très simple, pour tous les formulaires, utilisez le ReactiveFormsModule! Pour les inputs perdus sans formulaire, boutons, switch et tout autre chose qui ne demande pas de validation de la valeur retournée, vous pouvez utiliser le FormsModule. Ce n’est pas plus compliquer que cela.

Rappel sur le Reactive Form d’Angular

J’en vois déjà qui se disent que c’est compliqué… qu’il y a surement plus simple… Non!
Allé on y va! Rappel sur les formulaires réactifs d’Angular.

• Chaque element de notre formulaire est un « FormGroup« 
• Chaque « formGroup » peut contenir 1 ou plusieurs « FormControl »
• Chaque « FormControl » contient une valeur par défaut et un system de validation.

Normalement avec cela les formulaire n’au plus de secret pour vous!! Reste à pratiquer maintenant.

Comment Créer un Formulaire Reactif Angular

Pour créer un formulaire réactif, rien de plus facile. Vous utilisez le formBuilder d’Angular ou directement les formGroup avec les formControls:

Simple non? Alors plus aucune excuse pour ne pas utiliser les formulaires réactifs!

Gestion des listes avec les Reactive Form

Allons un peu plus loin et regardons ensemble comment utiliser les formulaires réactifs pour la gestion de liste, un grand classique ou je vois les élèves en pleine galère lors des formations.

Alors pour commencer, il faut savoir que la gestion de liste avec les formulaires réactive d’Angular s’apparent à une gestion de tableau en javascript. Quand vous avez compris cela tous devient beaucoup plus clair et facile à mettre en place.
Aller je vous montre un exemple simple:

Reactive Form: Ajouter un element dans une liste

La gestion des éléments se fessant comme une liste Javascript, nous devons pour ajouter un item, « pusher » dans le FormArray correspondant aux items un nouvel element du type « FormGroup » qui contiendra les « FormControls » dont nous avons besoin pour notre valider les items de notre formulaire.

J’ai donc créé un method « addItem() » qui va identifier le FormArray dans lequel il faut ajouter le nouveau FormGroup avec un FormControl. Cela ce fait avec la method « insert() » du formArrayControls. Vous pouvez également choisir la position ou l’element sera ajouté.

Reactive Form: Retirer un element d’une liste

Pour retirer un element de la liste et du formulaire, on va également procéder comme pour une liste JS. On identifie l’index de l’élément que l’on veut supprimer et on le passe à une method « removeItem(index) » qui va s’occuper de retirer l’element du formulaire en utilisant la method « removeAt(index) » du FormControls correspondant aux items.

Conclusion

Vous comprenez donc pourquoi je préconise l’utilisation des formulaires reactive plutôt que les Template-Driven. Avec les formulaires reactive vous avec un meilleure contrôle sur les divers elements qui le composent. Ainsi vous pouvez facilement gérer la validation des éléments d’une liste sans vous arracher les cheveux.

J’ajouterai aussi que vous pouvez aussi voir le rendu final sur Stackblitz:
https://stackblitz.com/edit/angular-wquxse.

Cela permet de mieux comprendre les subtilités d’utilisation dans un projet. Comme par exemple l’import du module « ReaciveFormsModule » dans le fichier « app.module.ts » de l’application pour activer les fonctionnalités des reactive formes d’Angular. Sans cela, rien ne fonctionne.

Pour que vous puissiez approfondir encore plus la gestion des formulaires réactifs, je vous laisse le lien de la documentation Angular sur les Reactive Forms:
https://angular.io/guide/reactive-forms

Vous retrouverez tous les autres articles traitant du même sujet dans la section Programmation

Et si vous rencontrez des problèmes lors de l’utilisation des formulaires réactifs, ou que vous avez besoin de support pour votre projet, je vous invite vous rendre sur le lien suivant pour définir ensemble une solution de support qui vous convienne.