Nous continuons notre travail sur RxJs, et nous allons enfin pouvoir avancer ! Découvrons la soeur du Template Driven Form : Le Reactive Form.
Certains y voient la messi, d’autres la trouve trop lourd à utiliser … Décortiquons ça ensemble !
Première étape, le paramétrage
Ajoutons dans notre module :
ReactiveFormModule. (en plus de FormsModule qui gère les TdF, mais pas que ! Si on ne l’ajoute pas, on a un beau : NOT_FOUND [ControlContainer] ).
Un paramétrage simple
Côté Template :
Côté Code :
Il existe un vrai lien entre les champs les FormControl que l’on crée, d’u côté ou de l’autre.
Si l’on change le nom (par exemple ici « name »), on se retrouve avec une erreur de ce type :
Seconde étape, l’utilisation
Mettre à jour une valeur
La mise à jour se fait depuis le code
Et l’on peut l’afficher ainsi :
De l’importance du FormGroup
Les FormControl font partie d’un groupe appelé : FormGroup.
Cela va permettre par exemple de récupérer toutes les données saisies depuis le champ .value :
Exemple de paramétrage du FormGroup
et côté template :
On peut même créer des sous-groupes :
Mettre à jour les données avec le FormGroup
On peut décider de mettre à jour tout ou partie des données, via le FormGroup.
Tout :
Certaines valeurs :
Validation de la form
Il est encore plus pratique de gérer la validation des formulaires avec les FormGroup.
Paramétrage
Utilisons ici les Validators.
Nous pouvons ici détecter côté template le status :
Et le côté Reactif il est où ?
Via le changeValue, pardi 🙂
On peut par exemple récupérer l’ancienne et la nouvelle valeur :
ou bien éviter d’envoyer trop d’info de changement :
Et en plus de ce côté réactif, qui nous permet de garantir l’immutabilité, nous allons enfin pouvoir créer des formulaires dynamiques, grâce aux FormArray.
On peut donc, vu que c’est un tableau, en ajouter dynamiquement :
Côté Html, voyons ce que ça donne :
Vous notez ici le formArrayName.
A très vite pour la suite de cette aventure RxJs !