CATALOGUE Code & Data Apprendre Ionic 5 Gestion manuelle des erreurs de formulaire dans Ionic

Gestion manuelle des erreurs de formulaire dans Ionic

Personnaliser notre ion-input: validation manuelle du champ
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Ionic 5
Revoir le teaser Je m'abonne
Transcription

99,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis

99,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

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.

Apprenez à gérer manuellement les erreurs de formulaire dans Ionic en utilisant Angular.

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.

Voir plus
Questions réponses
Pourquoi supprimer l'affichage automatique des erreurs d'Ionic?
Pour offrir une plus grande flexibilité dans la gestion et la personnalisation des messages d'erreur selon les besoins spécifiques de l'application.
Quelle classe CSS est créée pour afficher une bordure d'erreur?
La classe CSS créée est IonItemFormInvalid, qui ajoute une bordure inférieure de couleur rouge pour signaler une erreur.
Quand la fonction <em>IsInvalid</em> retourne-t-elle vrai?
Elle retourne vrai lorsque le FormControl est invalide et a été touché par l'utilisateur.

Programme détaillé