Validation manuelle des formulaires
Objectifs
Les objectifs de cette vidéo sont :
- Comprendre comment gérer manuellement les erreurs de formulaire dans Ionic.
- Apprendre à utiliser les outils Angular pour la validation des formulaires.
- Savoir appliquer du CSS conditionnel pour signaler les erreurs de saisie.
Résumé
Apprenez à gérer manuellement les erreurs de formulaire dans Ionic en utilisant Angular.
Description
Maintenant que l'affichage automatique des erreurs d'Ionic a été supprimé, il est nécessaire de gérer manuellement ces erreurs. Nous allons créer une fonction IsInvalid qui prend en paramètre un FormControl et retourne un booléen. La fonction retournera vrai si le FormControl est invalide et s'il a été touché par l'utilisateur.
Ensuite, nous ajoutons une nouvelle classe CSS, IonItemFormInvalid, avec une propriété border-bottom utilisant la couleur IonColorDanger. La prochaine étape consiste à inclure un ngClass dans le fichier HTML pour attribuer conditionnellement cette classe si le FormControl est invalide.
Finalement, nous testons le résultat en observant la bordure rouge qui apparaît lorsqu'un input invalide est désélectionné. Bien que ce soit un exemple basique, il est possible d'aller beaucoup plus loin avec cette méthode de gestion d'erreurs.