Validation de formulaire simplifiée avec AngularJS Online

Introduction du cours

Bienvenue dans ce cours concernant la validation de formulaire avec AngularJS !

Vous avez déjà développé avec AngularJS et vous souhaitez mettre en place une validation de formulaire solide ? Alors vous êtes au bon endroit ! 

Avant de commencer à lire ce cours, je vous conseille fortement de suivre le très bon cours de Rémi Michel qui vous expliquera comment construire une application web avec AngularJS et la validation de formulaire dans la section "Pour aller plus loin".

Depuis la version 1.3 du framework de Google, il existe une nouvelle fonctionnalité appelée "ngMessages". Dans ce cours je vais vous présenter cette fonctionnalité afin que vous puissiez établir facilement une validation de formulaire avec AngularJS.

Exemple de validation de formulaire en utilisant le framework Bootstrap

Assez discuté, passons au vif du sujet ! :D

Présentation des ngMessages

Avant l'arrivée de la version 1.3 d'AngularJS, il était peu pratique d'établir une validation de formulaire avec AngularJS. En effet il fallait insérer des balises <div> complexes en dessous de chaque champ tout en vérifiant des propriétés AngularJS et cela devenait très fastidieux, voire très difficile à maintenir.

Heureusement depuis cette nouvelle version, la team Google a intégré une nouvelle fonctionnalité à son framework : les ngMessages. Cette directive sert à afficher ou cacher un message de la manière clé/valeur en se basant sur la propriété $error. 

Cela veut dire qu'AngularJS affichera un message d'erreur uniquement lorsqu'il y aura une erreur sous votre champ. Vous définissez le message que vous souhaitez afficher pour un état donné et le tour est joué ! Par exemple, un affichage de "Champ requis" pour une erreur de type required.

Documentation officielle des ngMessages.

Mise en pratiqueLa déclaration des erreurs

Pour commencer, nous allons créer un fichier erreurs.html qui contiendra l'ensemble de nos messages d'erreurs à afficher :

<div ng-message="required">Champ requis</div> <div ng-message="minlength">Valeur trop courte</div> <div ng-message="maxlength">Valeur trop longue</div> <div ng-message="email">E-mail non valide</div> <div ng-message="number">Caractères alphabétiques non autorisés</div>

Pour l'instant, rien de très compliqué, il s'agit juste d'un ensemble de div contenant chacune un ngMessage qui possède le message à afficher pour l'erreur correspondante.

Le formulaire et ses restrictions

Afin d'illustrer correctement et simplement ce mécanisme, nous allons créer un formulaire d'inscription basique. En voici la composition :

Variable

Type

Restrictions

prenom 

text 

Requis / Taille max : 20 caractères / Taille min : 2 caractères

nom 

text 

Taille max : 30 caractères

mail 

email 

Requis

age 

number 

Requis / Taille min : 10 caractères

Maintenant il ne reste plus qu'à écrire le code HTML correspondant à ce formulaire :

<form name="myForm" ng-submit="foo()" novalidate> <label>Prénom : </label> <input name="prenom" type="text" required ng-minlength="2" ng-maxlength="20" /> <label>Nom : </label> <input name="nom" type="text" ng-maxlength="30" /> <label>E-mail : </label> <input name="mail" type="email" required /> <label>Âge : </label> <input name="age" type="number" required /> <input type="submit" value="Envoyer" /> </form>

Pour l'instant, si vous connaissez le langage HTML, rien de très difficile à assimiler, il s'agit juste des différents champs input correspondant au tableau ci-dessus.

L'attribut novalidate sert à désactiver la validation de formulaire HTML5 de base afin d'éviter les conflits avec la validation établie par AngularJS. Vous pouvez également remarquer que l'ensemble des restrictions préfixées par "ng" est obligatoire pour permettre une validation avec ce framework.

Bien, maintenant notre formulaire est "protégé" par AngularJS — c'est-à-dire que celui-ci n'exécutera pas l'action foo() s'il y a une erreur dans le formulaire — cela permet d'éviter toutes intrusions non souhaitées dans le modèle. Cependant, l'utilisateur n'est pas au courant car aucun message ne lui est affiché. Il ne reste donc plus qu'à afficher ces fameux ngMessages ! :)

Affichage des erreurs

Place au cœur du sujet, l'affichage des erreurs ! Pour cela, nous allons devoir écouter sur la propriété $error qui contient les erreurs d'un champ et inclure notre fichier erreurs.html afin d'afficher les messages correspondant quand l'utilisateur n'aura pas respecté les restrictions de champs.

<form name="myForm" ng-submit="foo()" novalidate> <label>Prénom : </label> <input name="prenom" type="text" required ng-minlength="2" ng-maxlength="20" /> <div ng-messages="myForm.prenom.$error" ng-messages-include="erreurs.html"></div> <label>Nom : </label> <input name="nom" type="text" ng-maxlength="30" /> <div ng-messages="myForm.nom.$error" ng-messages-include="erreurs.html"></div> <label>E-mail : </label> <input name="mail" type="email" required /> <div ng-messages="myForm.mail.$error" ng-messages-include="erreurs.html"></div> <label>Âge : </label> <input name="age" type="number" required /> <div ng-messages="myForm.age.$error" ng-messages-include="erreurs.html"></div> <input type="submit" value="Envoyer" /> </form>

Comme je viens de vous l'expliquer, la différence réside dans l'inclusion d'une balise <div> en dessous de chaque champ avec comme attribut la directive ngMessages ayant un paramètre de la forme "nomDuFormulaire.nomDuChamp.$error" afin d'écouter sur la propriété $error de chaque champ.

Enfin, le second attribut est la directive ngMessagesInclude afin d'inclure notre fichier contenant les messages d'erreurs. Et voilà, le tour est joué ! :D

Surcharge de messages

AngularJS nous offre la possibilité de surcharger ces messages. Par exemple, si nous souhaitons afficher "Votre prénom est requis" au lieu de "Champ requis", c'est tout à fait possible !

<label>Prénom : </label> <input name="prenom" type="text" required ng-minlength="2" ng-maxlength="20" /> <div ng-messages="myForm.prenom.$error" ng-messages-include="erreurs.html"> <div ng-message="required">Votre prénom est requis</div> </div>

Comme vous pouvez le voir dans cet exemple pour le champ prenom, nous avons ajouté une balise ngMessage exactement de la même manière qu'avec le fichier erreurs.html. On pourrait croire qu'AngularJS marquerait "Champ requis", puis "Votre prénom est requis" mais non ! Intelligemment, AngularJS va voir qu'il y a eu une surcharge du message pour  et ne va afficher que "Votre prénom est requis". C'est pas beau ça ? :)

Petite amélioration

La validation est maintenant opérationnelle, mais vous allez me dire :

Oui, mais dès que j'entre un caractère dans le champ  prenom j'ai directement un message d'erreur concernant la taille minimale ?

C'est normal ! C'est grâce au data-binding bidirectionnel avec l'affichage dynamique en temps réel ; cependant nous pouvons gérer cela en spécifiant à AngularJS d'afficher ces messages seulement lorsque le formulaire aura été envoyé, par exemple !

<form name="myForm" ng-submit="foo()" novalidate> <label>Prénom : </label> <input name="prenom" type="text" required ng-minlength="2" ng-maxlength="20" /> <div ng-messages="myForm.prenom.$error" ng-messages-include="erreurs.html" ng-if="myForm.$submitted"></div> <label>Nom : </label> <input name="nom" type="text" ng-maxlength="30" /> <div ng-messages="myForm.nom.$error" ng-messages-include="erreurs.html" ng-if="myForm.$submitted"></div> <label>E-mail : </label> <input name="mail" type="email" required /> <div ng-messages="myForm.mail.$error" ng-messages-include="erreurs.html" ng-if="myForm.$submitted"></div> <label>Âge : </label> <input name="age" type="number" required /> <div ng-messages="myForm.age.$error" ng-messages-include="erreurs.html" ng-if="myForm.$submitted"></div> <input type="submit" value="Envoyer" /> </form>

Et voilà ! Vous pouvez voir que j'ai utilisé la directive ngIf avec comme paramètre myForm.$submitted afin d'afficher ces messages uniquement lorsque notre formulaire aura été envoyé !

Conclusion

J'espère que ce cours vous aura convaincu d'utiliser la validation de formulaire avec AngularJS ! Vous voyez qu'en quelques lignes cela devient possible et qu'il y a eu une belle amélioration de ce mécanisme depuis la version 1.3 d'AngularJS !

Sachez que la validation de formulaire est très importante, ne serait-ce que pour la sécurité de votre site web : il est préférable de traiter les données en amont avant de les envoyer au serveur.

Je vous remercie d'avoir suivi mon cours, n'hésitez pas à me contacter si vous avez d'éventuelles questions ! :)

• #

Waouh !

Très heureux de voir que nos cours vous plaisent, déjà 3 pages lues aujourd'hui ! Vous pouvez continuer la lecture de nos cours en devenant un Roomie, un membre de la communauté d'OpenClassrooms. C'est gratuit !

Vous pourrez aussi suivre votre avancement dans le cours, faire les exercices et discuter avec les autres Roomies.

S'inscrire Se connecter

• Thématiques du cours : Framework Javascript Web

Chaque cours est créé par un professeur ou un expert dans le domaine. Il est composé d'une ou plusieurs parties et peut comporter du texte, des images (schéma, illustration) et des vidéos. Chaque partie d'un cours certifiant est ponctuée d'exercices de 2 types : Des quiz corrigés automatiquement Des devoirs libres (exemple : créer un site web avec des consignes précises). Ces devoirs sont évalués par les pairs. Chaque devoir est corrigé 3 fois par 3 autres élèves, dans un processus en double aveugle, selon un barème fixé par le professeur. La note finale est la moyenne des 3 notes reçues sur le devoir. 50% des devoirs corrigés par les pairs obtiennent quasiment les 3 mêmes notes, avec une variance inférieure à 1. La recherche académique montre d'ailleurs que l'évaluation par les pairs peut être aussi précise que celle des professeurs.