Ionic - 10.5 Afficher les erreurs de validation d'un formulaire

Un formulaire doit guider l'utilisateur lorsqu'une saisie est fausse. Dans cette leçon, les champs invalides deviennent rouges, un message d'erreur apparaît et le bouton de connexion reste désactivé. Ces règles s'appuient sur la validation des formulaires d'Angular.

Colorer les champs invalides

Lorsqu'un champ est invalide et utilisé, Ionic ajoute les classes ion-invalid et ion-touched à l'élément. Une règle ajoutée dans le fichier global de styles, pour ces deux classes, colore en rouge les éléments concernés avec la variable danger.

Le label peut aussi passer en rouge, ce qui rend l'erreur plus visible.

Afficher un message d'erreur

Le champ email est lié au formulaire Angular grâce à ngModel, avec une variable de contrôle nommée email. Cela permet de vérifier si l'adresse est valide. Sous le champ, un paragraphe dans un ion-note affiche le message d'erreur.

Le message ne doit apparaître qu'une fois le champ invalide et utilisé. Sinon, il s'affiche dès l'ouverture de la page. Le même principe est ensuite appliqué au mot de passe.

Désactiver le bouton

Le bouton de connexion reçoit une condition qui le désactive tant que le formulaire est invalide. Au lancement de l'application, le bouton est donc désactivé, car les champs ne sont pas encore correctement remplis.

La leçon suivante traitera le basculement entre les modes d'authentification.

En résumé

Les champs invalides prennent la couleur de danger grâce aux classes ion-invalid et ion-touched. Un message d'erreur s'affiche seulement après l'utilisation du champ. Le bouton de connexion reste désactivé tant que le formulaire n'est pas valide.

Points clés

• Les classes ion-invalid et ion-touched signalent un champ invalide et utilisé.
• Une règle globale colore ces champs avec la variable danger.
• Un message d'erreur dans un ion-note explique le problème.
• Le message n'apparaît qu'après l'utilisation du champ.
• Le bouton de connexion est désactivé tant que le formulaire est invalide.

Questions fréquentes

Pourquoi le message d'erreur n'apparaît-il pas tout de suite ?

Parce qu'il dépend de deux conditions : le champ est invalide et il a déjà été utilisé.

À quoi servent les classes ion-invalid et ion-touched ?

Elles indiquent que le champ est invalide et qu'il a été touché, ce qui permet de le colorer en conséquence.

Peut-on désactiver le bouton automatiquement ?

Oui. Une condition liée à la validité du formulaire le désactive tant qu'il n'est pas valide.