Ionic - 10.11 Lier un formulaire réactif au template Ionic
Un formulaire Ionic peut être géré par un FormGroup Angular, qui garde les valeurs et les règles de validation. Cette leçon relie chaque champ du template à son contrôle, puis teste la validation. Le formulaire d'une nouvelle offre sert d'exemple.
Relier les champs au FormGroup
La balise form contient la grille et tous les champs. Elle est associée au FormGroup créé dans le fichier TypeScript de la page, de façon dynamique.
Chaque champ reçoit un attribut formControlName, dont la valeur correspond au nom du contrôle. Le même travail se répète sur tous les champs, ainsi que sur le sélecteur de date.
Tester la validation dans la console
Dans la méthode de création de l'offre, la vidéo remplace un simple message de console par l'affichage du contenu du formulaire. Ce contenu apparaît alors dans la console lors de la validation.
Si on valide sans rien remplir, les valeurs des contrôles sont nulles. Si le prix vaut 0, le formulaire est invalide et le champ est marqué en rouge sur la page.
Dès qu'un prix valide est saisi, le formulaire devient valide et les valeurs restent présentes.
L'intérêt est qu'aucune méthode supplémentaire n'est nécessaire : tout est déjà présent dans le code TypeScript grâce au FormGroup.
En résumé
Un FormGroup relie chaque champ HTML à un contrôle Angular grâce à formControlName. La validation s'affiche sur la page, et les valeurs restent accessibles dans le code. La leçon suivante terminera le formulaire de nouvelle offre.
Points clés
- Le FormGroup est créé dans le fichier TypeScript de la page.
- formControlName relie chaque champ à son contrôle.
- Un prix de 0 rend le formulaire invalide, avec un champ marqué en rouge.
- Les valeurs restent disponibles dans le code sans méthode supplémentaire.
- La validation se vérifie dans la console après un clic.
Questions fréquentes
Pourquoi les valeurs affichent-elles null au départ ?
Les champs n'ont pas encore reçu de saisie. La vidéo montre donc des valeurs nulles lorsque le formulaire est validé à vide.
Que signifie un formulaire invalide ?
Une règle de validation n'est pas respectée, comme un prix égal à 0. La page le signale en rouge, et la console indique que le formulaire n'est pas valide.
Faut-il écrire une méthode pour récupérer les valeurs ?
Non, la vidéo explique que tout est déjà présent dans le code TypeScript grâce au FormGroup.