Récemment, les bogues restants des composants maintenus en main sont la vérification du formulaire, et la logique dans le code de vérification de formulaire de l'entreprise n'a pas été claire depuis des générations, et la structure du code n'est pas très angulaire.
Il est très nécessaire d'avoir une compréhension approfondie de la vérification de la forme.
<body ng-controlller = "MainController"> <form name = "form" novalidate = "novalidate"> <input name = "text" type = "e-mail" ng-model = "name"> </ form> </ body>
Ngmodel est une magie noire angulaire, qui réalise la liaison bidirectionnelle. Lorsque la valeur du nom change, la valeur d'entrée changera également.
Lorsque l'entrée de l'utilisateur modifie la valeur, la valeur du nom change également.
Le but de Novalidate = "Novalidate" est de supprimer la vérification du formulaire qui vient avec le système.
Après analyser le code ci-dessus, Angular générera une variable "formulaire" et $ scope.form sous la portée $ de la majeureté. Le nom de cette variable est le même que Form.Name dans HTML.
Et $ scope.form.Text est le modèle de la zone d'entrée de texte, hérité de NGModelController.
WHERE $ SCOPE.Form est de FormController. Son contenu est:
Le modèle (c'est-à-dire $ scope.form.text) de la zone d'entrée de texte est:
Lorsque $ sale / $ vierge, $ valide / $ invalide, $ error est des attributs communs. Surtout $ Erreur.
La vérification de la forme la plus simple:
Après avoir compris la boîte de formulaire et d'entrée, vous pouvez d'abord modifier la commande la plus simple pour afficher l'erreur.
Le contenu HTML est le suivant:
<form name = "form" novalidate = "novalidate"> <input name = "text" type = "e-mail" ng-model = "name" error-tip> </ form>
Le code de commande est le suivant:
// Lorsque l'erreur de la zone d'entrée se produit, l'erreur s'affiche directive ("errortip", fonction ($ compile) {return {restrict: "a", exiger: "ngModel", link: function ($ scope, $ element, $ attrs ng-if = "Haserror ()"> {{errors () | json}} </span> '; // sale et invalide, c'est bien sûr une erreur. {e-mail: true, xxx: true, xxxx: trie} $ scope.errors = function () {return $ ngmodel. $ error;} // compiler la mauvaise instruction et le mettre dans la zone d'entrée après $ element.after ($ compile (point) (subscope));}}});Jetons un coup d'œil aux résultats de l'exécution en premier:
Lors de la saisie d'une adresse e-mail non valide:
Lors de la saisie de l'adresse e-mail correcte:
La directive Errortip commence par l'obtention du NGModelController via l'exigence: "ngmodel". Créez ensuite un élément pour afficher l'erreur dans la zone d'entrée.
$ compil est utilisé ici, et $ compile est utilisé pour compiler et afficher dynamiquement le contenu HTML.
Lorsqu'il y a un contenu d'erreur, le mauvais élément sera affiché.
Pourquoi l'accès à la sous -cope peut-il avoir des méthodes d'erreurs et d'erreurs?
En raison de la chaîne prototype. Regardez l'image ci-dessous pour le savoir.
Personnaliser le contenu d'erreur
OK, il est évident que la vérification du formulaire n'est pas disponible maintenant. Nous devons personnaliser le contenu d'erreur à afficher, et il y a plus d'une erreur à afficher.
Utilisez NG-Repeat pour afficher plusieurs erreurs, c'est-à-dire d'utiliser la commande "Errortip"
TIP = '<span ng-if = "Haserror ()"> {{errors () | JSON}} </span> ';Passer à:
TIP = '<ul ng-if = "Haserror ()" ng-repeat = "(errorkey, errorValue) dans errors ()">' + '<span ng-if = "errorValue"> {{errorkey | errorFilter}} </span> '+' </ul> ';où ErrorFilter est un filtre pour l'affichage personnalisé des messages d'erreur. Un filtre est en fait une fonction.
Le code est le suivant:
.Filter ("ErrorFilter", function () {return function (input) {var errorMessagesMap = {e-mail: "Veuillez saisir l'adresse e-mail correcte", xxoo: "pas adapté aux enfants"} return errorMesagesMap [entrée];}});Les résultats sont les suivants:
Ok, ici, nous pouvons gérer la vérification du formulaire "simple". Oui, simple. Nous devons continuer à aller plus loin.
Vérification du formulaire personnalisé!
Ensuite, implémentons une vérification de formulaire qui ne peut pas être entrée dans "Handsome Guy".
Les instructions sont les suivantes:
.Directive ("donotinputhandsomeboy", function ($ compile) {return {restrict: "a", require: "ngmodel", lien: function ($ scope, $ element, $ attrs, $ ngmodel) {$ ngModel. invalide, $ error deviendra {beau: true} $ ngmodel. $ setValidité ("beau", false);} valeur de retour;})}}})Les résultats sont les suivants:
Il y a deux choses clés ici, $ ngmodel. $ Parsers et $ ngmodel. $ Setvalidité.
$ ngmodel. $ parser est un tableau. Lors de la saisie du contenu dans la zone d'entrée, il traversera et exécutera les fonctions dans $ PARSERS.
$ ngmodel. $ setValidité ("beau", false); Le réglage Handome to Invalid définira $ ngModel. $ Error ["Handsome"] = true;
Supprimer $ ngmodel. $$ Success ["Handsome"] est également défini, et vous pouvez rechercher le code source pour plus de détails.
Ici, je résumerai le processus.
-> entrée utilisateur
-> Angular exécute toutes les fonctions dans $ parsers
-> inspecter $ setValidité ("xxoo", false); alors xxoo sera défini sur $ ngmodel. $ error ["xxoo"]
-> alors l'instruction errortip ng-répéter $ ngmodel. $ Erreur
-> ErrorFilter échappera au message d'erreur
-> Le message d'erreur a été affiché à la fin
Personnalisez le contenu d'affichage de la zone d'entrée
Plusieurs fois, le développement n'est pas aussi simple que de vérifier les erreurs et d'afficher des erreurs. Parfois, nous devons formater le contenu de la boîte d'entrée.
Par exemple, "1000" s'affiche sous le nom de "1 000"
"Bonjour" apparaît comme "bonjour"
Implémentons maintenant les initiales automatiques.
Le code source est le suivant:
<form name = "form" romanated = "novalidate"> <input name = "text" type = "text" ng-model = "name" Upper Case> </ form> .Directive ("uppercase", function () {return {restreindre: "a", exiger: "ngmodel", lien: function ($ scope, $ element, $ attrs, $ ngmodel) {$ ngmodel. $ parsers.push (function (value) {var ViewValue ViewValue [0] .toupperase () + ViewValue.SubString (1); // Définissez le contenu de l'interface $ ngmodel. $ setViewValue (ViewValue);Ici, nous utilisons $ setViewValue et $ rendu, $ setViewValue pour définir ViewValue sur la valeur spécifiée, et $ rendu affiche ViewValue à l'interface.
Beaucoup de gens pensent que l'utilisation de $ setViewValue peut mettre à jour l'interface, mais ils n'utilisent pas $ rendu, et en fin de compte, l'interface n'a pas été actualisée quoi qu'il fasse.
Si seulement $ ngmodel. $ Parsers ne suffit pas, $ parsers n'est déclenché que lorsque l'utilisateur entre un nouveau contenu dans la zone d'entrée. Une autre situation est que le contenu de la boîte d'entrée doit être rafraîchi:
C'est une liaison bidirectionnelle. Par exemple, la boîte d'entrée est à l'heure actuelle à $ scope.name dans MainPorroller. Lorsque l'utilisateur modifie $ scope.name en "bonjour" à d'autres égards, la capitalisation de la première lettre ne peut pas être vue dans la zone d'entrée.
Pour le moment, vous devez utiliser des formateurs $, alors voyons d'abord un exemple.
<body ng-controller = "MainController"> <form name = "form" novalidate = "novalidate"> <button ng-click = "random ()"> random </ bouton> <input name = "text" type = "text" ng-model = "name" Upperd-case> </ form> </body>
Contenu de maîtrise:
angular.module ("app", []). Controller ("MainController", fonction ($ scope, $ timeout) {$ scope.random = function () {$ scope.name = "hello" + math.random ();}})C'est assez simple. Lorsque vous cliquez sur le bouton, $ scope.name devient un contenu aléatoire à partir de Hello.
Il est évident que la lettre initiale de Hello n'est pas capitalisée, pas ce que nous voulons.
Nous modifions le contenu de la commande suivante:
.Directive ("uppercase", function () {return {restrict: "a", require: "ngmodel", lien: function ($ scope, $ element, $ attrs, $ ngmodel) {$ ngmodel. $ parsers.push (function (value) {var ViewValue = upppercaseFiRSTOW $ ngmodel. $ setViewValue (ViewValue); // Rendre à l'interface, cette fonction est très importante $ ngmodel. $ render (); Undefined et convertir tous les contenus en fonction de chaîne HandleEMPTyValue (valeur) {return angular.isundefined (valeur)? "": "+ value;} //Pour résumer:
1 et 1
-> L'utilisateur entre le contenu dans la zone d'entrée
-> Traversion angulaire de la fonction dans $ ngmodel. $ analyse convertit le contenu d'entrée, puis le définit sur $ ngmodel. $ ModelValue
-> Dans la fonction dans le tableau $ ngmodel. $ Analyse, nous modifions $ ngmodel. $ ViewValue, puis $ ngmode. $ Render () rend le contenu.
2
-> Générer des cordes aléatoires à travers les boutons pour définir pour nommer
-> Chaque fois que la détection sale déterminera si la valeur du nom est incompatible avec $ ngmodel. $ ModelValue (ici est implémenté à l'aide de $ watch). Si l'incohérent, parcourez toutes les fonctions dans $ formaters dans l'ordre inverse et exécutez, et attribuez la valeur de retour finale à $ ngmodel. $ ViewValue
-> actualiser le contenu de la zone d'entrée
L'exemple "Personnaliser le contenu d'affichage de la zone d'entrée" peut-il être optimisé?
Pourquoi optimiser?
La raison est très simple. Afin d'implémenter "Contenu personnalisé", $ Parsers et $ Fonders sont utilisés. En fait, le contenu des deux est très similaire! C'est très important.
Comment optimiser?
Utilisez $ ngmodel. $ Validators.
Ok, changez maintenant l'exemple.
.Directive ("Uppercase", function () {return {restrict: "a", exiger: "ngmodel", lien: function ($ scope, $ element, $ attrs, $ ngmodel) {// 1.3 est pris en charge. Que vous entrez manuellement ou mettez à jour ModelValue à travers d'autres endroits, $ ngModel. $ validators. ViewValue = UpperCaseFirstword (HandleEmpTyValue (ModelValue)); // Définissez le contenu de l'interface $ ngmodel. $ SetViewValue (ViewValue); // Resource sur l'interface, cette fonction est très importante $ ngModel. dans la fonction de chaîne HandleEmpTyValue (Value) {return angular.isundefined (valeur)?Le code est beaucoup plus simple, pris en charge uniquement par $ ngmodel. $ Validators dans la version 1.3 ou supérieure.
Si la valeur de retour de $ ngmodel. $ Validators.uppercase La fonction est fausse, alors $ ngmodel. $ Error ['uppercase'] = true. Ceci est similaire à $ ngmodel. $ SetValidité ("majuscule", false).