Share
Presque tous les sites Web utilisent des formulaires pour effectuer différentes tâches, telles que la création d’un compte ou l’obtention de leurs coordonnées. Il est très important de s'assurer qu'un utilisateur qui remplit le formulaire entre au moins des informations valides dans les champs de saisie..
Il est également nécessaire d'afficher un message d'erreur détaillé aux utilisateurs pour qu'ils puissent remplir le formulaire correctement. Ce processus peut devenir très compliqué lorsque vous devez traiter un grand nombre d’éléments de formulaire, chacun nécessitant ses propres messages d’erreur personnalisés. Pour faciliter la tâche, Angular 1.3 a ajouté un nouveau module appelé ngMessages pour aider les développeurs à valider facilement les formulaires..
Le module ngMessages vous permet d'afficher des messages d'erreur personnalisés à vos utilisateurs sans écrire de code répétitif. Dans ce tutoriel, vous apprendrez à utiliser ce module pour valider vos formulaires. Vous apprendrez également à charger les messages d'erreur en externe et à ne les afficher que lorsqu'ils sont réellement nécessaires..
Commençons par valider un seul champ de saisie avec et sans l'aide de ngMessages pour voir l'utilité de ce module. Sans utiliser ngMessages, le balisage de l'élément d'entrée ressemblera au code suivant:
Vous aurez également besoin du code JavaScript suivant:
Accentsconagua
angular.module ('app', []);Tous les autres éléments de formulaire devront être validés de la même manière. Cela rendra le balisage très répétitif, augmentant les risques d'erreur. Si vous avez décidé d'utiliser ngMessages pour valider la même entrée de formulaire, le balisage aurait ressemblé au code suivant:
Le code JavaScript va maintenant devenir:
angular.module ('app', ['ngMessages']);Ici, nous avons utilisé le ng-messages directive pour regrouper les messages d'erreur. La valeur passée à la ng-messages directive suit le modèle formName.inputName. $ error. Dans notre cas, cela revient à formValidation.username. $ error.
De même, vous pouvez également obtenir la valeur du ng-messages directive pour tous les autres champs. ngMessages s'appuie sur le $ error objet exposé par la directive ngModel pour déterminer si les messages d'erreur doivent être affichés ou masqués sur la page Web. Il fait une boucle à travers le $ error objet à la recherche d'une clé qui correspond aux valeurs de l'un des ng-message les directives.
Voici un exemple de travail montrant le code de validation ci-dessus en action:
Dans cette section, nous allons valider un formulaire avec un nom d'utilisateur, un mot de passe et un champ de courrier électronique. Le balisage du formulaire ressemblera au code suivant:
Comme vous pouvez le constater, le balisage requis pour valider différents éléments de formulaire est très similaire. Un changement important dans ce cas est l’ajout du ng-pattern directif. Le modèle que nous utilisons ici garantit que le nom d'utilisateur saisi ne comporte que des caractères alphanumériques et un trait de soulignement. le \ w dans / ^ \ w + $ / représente des mots comme A-Z, a-z, 0-9 et _.
Vous devriez essayer de saisir un nom d'utilisateur différent dans le champ Nom d'utilisateur. Après un certain temps, vous remarquerez que le formulaire ne se plaint pas d'un caractère non alphanumérique s'il a été saisi avant les six premiers caractères ou après les 12 premiers caractères. Ce comportement n'est pas très convivial.
Par exemple, supposons que certains de vos utilisateurs commencent leur nom d'utilisateur par un point d'exclamation. Ils devront attendre d'avoir saisi six caractères supplémentaires pour obtenir l'erreur de n'utiliser que des caractères alphanumériques. Ce sera très frustrant pour eux de recommencer à taper le nom d'utilisateur depuis le début..
Par défaut, ngMessages n'indique qu'une erreur à l'utilisateur à la fois. C'est pourquoi le message sur les caractères non valides ne pouvait pas être affiché avant qu'un utilisateur n'ait saisi plus de six caractères. De plus, ngMessages utilise l’ordre dans lequel vous avez entré les messages d’erreur pour déterminer leur priorité..
Si vous avez fourni le message de caractère minimum avant l'erreur alphanumérique, ngMessages attendra que l'erreur de caractère minimum ait été résolue avant d'afficher l'erreur alphanumérique..
Voici le même formulaire avec les messages d'erreur présentés dans un ordre différent.
Vous pouvez également afficher tous les messages d'erreur applicables à un utilisateur à la fois à l'aide du bouton ng-messages-multiple. Cependant, l'affichage de plusieurs messages d'erreur dès que les utilisateurs commencent à taper dans un champ de saisie peut les submerger..
Il y a encore beaucoup de répétition dans notre balisage. Si vous souhaitez afficher le même message d'erreur pour différents champs de saisie, il est inutile de le répéter pour chacun d'entre eux. Le module ngMessages peut vous aider à écrire des messages d'erreur génériques une seule fois et à les inclure dans votre formulaire chaque fois que le besoin s'en fait sentir. Voici le balisage pour créer un formulaire qui affiche des messages d'erreur génériques aux utilisateurs.
Comme dans le cas précédent, la priorité d'un message est déterminée par sa place dans le modèle. Vous pouvez également remplacer les messages génériques fournis dans le modèle en incluant un message d'erreur personnalisé dans des champs individuels. Les messages d'erreur peuvent également être chargés à partir d'un fichier séparé à l'aide du code suivant:
Vous pouvez rendre votre formulaire plus convivial en affichant uniquement les messages d'erreur lorsqu'un utilisateur a réellement commis une erreur en remplissant les formulaires. Par exemple, vous pouvez choisir d'afficher uniquement l'erreur de champ requise lorsqu'un utilisateur ignore réellement un élément d'entrée..
Ceci peut être réalisé en utilisant soit le ng-show ou ng-si directive avec $ touché et $ sale. Dans le cas de $ touché, le message d'erreur s'affiche dès que l'entrée perd le focus. Dans le cas de $ sale, le message d'erreur apparaît dès que l'entrée est invalide.
Voici la démo qui montre la différence entre
$ touchéet$ sale.Conclusion
Dans ce tutoriel, vous avez appris à quel point il est facile de valider la saisie de différents types d’éléments de formulaire à l’aide de ngMessages. Vous avez également appris à réutiliser plusieurs fois les mêmes messages d'erreur pour éviter les répétitions et à hiérarchiser différents messages d'erreur..
Vous pouvez également utiliser simultanément ngMessages et ngAnimate pour utiliser des animations personnalisées pour afficher ou masquer votre message d'erreur. Un tutoriel sur l’utilisation du module ngAnimate sera également publié sur Envato Tuts + bientôt.
Si vous souhaitez partager des astuces avec d'autres lecteurs ou des questions que vous souhaitez poser, faites-le moi savoir dans les commentaires..
