CATALOGUE Code & Data Formation Angular JS Apprendre Angular JS Améliorer la Validation de Formulaire avec AngularJS

Améliorer la Validation de Formulaire avec AngularJS

Composants avec des onglets : appliquer la validation et l'affichage CSS
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Angular JS
Revoir le teaser Je m'abonne
4,0
Transcription

59,90€ Je commande

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

DescriptionProgrammeAvis
4,0
59,90€ Je commande

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

À la fin de cette vidéo, vous saurez :
- Valider un formulaire en temps réel.
- Afficher dynamiquement les erreurs.
- Styliser les champs selon leur validité.

Apprenez à améliorer votre formulaire avec la validation dynamique et l'affichage des erreurs en temps réel.

Dans cette leçon, nous allons perfectionner notre précédent exercice en utilisant les onglets pour la validation de formulaire avec AngularJS. Le but est d'indiquer les erreurs pour les champs nom et contenu lorsque l'utilisateur valide le formulaire, c'est-à-dire au moment du clic sur le bouton d'ajout de l'onglet. Lorsque l'utilisateur tente d'ajouter un onglet sans remplir les champs nécessaires, nous affichons un message d'erreur et colorions les champs en rouge pour indiquer où se trouvent les erreurs.

Nous allons utiliser une variable de soumission (submit) qui est mise à jour lorsque l'utilisateur clique sur le bouton d'ajout. Si le formulaire n'est pas valide, un nouvel onglet ne sera pas ajouté, et nous vérifierons l'état de validité du formulaire avant de permettre l'ajout. Nous afficherons les erreurs à l'aide de directives AngularJS telles que ng-if et ng-model, et nous styliserons les champs incorrects pour améliorer l'expérience utilisateur.

En se basant sur un exemple pratique, cette leçon comprend également des astuces pour dynamiser l'affichage des erreurs et adapter l'apparence des champs selon la validité du formulaire. Enfin, nous verrons comment appliquer des classes dynamiques pour signaler visuellement les erreurs.

Voir plus
Questions réponses
Comment empêcher l'ajout d'un onglet lorsque le formulaire n'est pas valide ?
En vérifiant la validité du formulaire avec une condition qui empêche l'ajout si le formulaire est invalide.
Quelle variable est utilisée pour suivre le clic sur le bouton d'ajout ?
La variable submit est utilisée pour suivre si l'utilisateur a cliqué sur le bouton d'ajout du formulaire.
Comment styliser en rouge les champs de formulaire invalides ?
En appliquant une classe CSS qui change le fond en rouge lorsque les champs sont invalides et la variable submit est vraie.

Programme détaillé

2 commentaires
4,0
2 votes
5
4
3
2
1
mickael.crez
Il y a 4 ans
Super formation ! Maintenant ça va être impossible de développer sans AngularJS.
Merci au formateur pour cette formation très complète.
alain_nogues
Il y a 4 ans
Pourquoi la police de l'éditeur est-elle si petite ? On s’abîme les yeux à lire ces pattes de mouche. Ce n'est quand même pas compliqué de configurer un corps de 16 ou 18 dans l'éditeur non ?
Je mets une note moyenne à cause de cette bévue impardonnable pour un formateur, alors que la formation est pourtant très bien faite.
Je remonterai ma note quand l'auteur refera ces vidéos avec une police lisible ...