By: Evan Boissonnot
31 mai 2021
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 !
