In jüngster Zeit sind die verbleibenden Fehler der in der Hand gehaltenen Komponenten die Form zur Form, und die Logik innerhalb des Formularverifizierungscode des Unternehmens ist seit Generationen unklar, und die Codestruktur ist nicht sehr eckig.
Es ist sehr notwendig, ein detailliertes Verständnis der Form zu vermitteln.
<Body ng-controller = "MainController"> <Formular name = "Form" novalidat = "novalidat"> <input name = "text" type = "E-Mail" ng-model = "name"> </form> </body>
Ngmodel ist eine winkelige schwarze Magie, die eine bow-Wege-Bindung realisiert. Wenn sich der Wert des Namens ändert, ändert sich auch der Eingabewert.
Wenn der Benutzereingang den Wert ändert, ändert sich auch der Wert des Namens.
Der Zweck von novalidate = "novalidate" ist es, die mit dem System gelieferte Form zu entfernen.
Nach dem Parsen des obigen Codes generiert Angular eine Variable "Form" und $ scope.form unter dem $ Scope von MainController. Der Name dieser Variablen ist der gleiche wie Form.name in HTML.
Und $ scope.form.text ist das Modell des Texteingangsfelds, das von NgModelController geerbt wurde.
Wobei $ scope.form Instance von FormController stammt. Sein Inhalt ist:
Das Modell (dh $ scope.form.text) des Texteingangsfelds lautet:
Wenn $ Dirty/$ Pristine, $ gültig/$ ungültig, sind $ Fehler gemeinsame Attribute. Besonders $ ERROR.
Die einfachste Formüberprüfung:
Nach dem Verständnis des Formulars und der Eingabefeld können Sie zuerst den einfachsten Befehl zum Anzeigen des Fehlers bearbeiten.
Der HTML -Inhalt lautet wie folgt:
<Formular name = "Form" novalidat = "novalidat"> <Eingabe name = "text" type = "E-Mail" ng-model = "Name" Fehler-Tip> </Form>
Der Befehlscode lautet wie folgt:
// Wenn der Eingangsbox -Fehler auftritt, wird der Fehler angezeigt ("errortip", function ($ compile) {retrict {begrenzt: "a", benötigen: "ngmodel", link: function ($ scope, $ Element, $ attr ng-if = "haserror ()"> {{{{{{) |. {E -Mail: true, xxx: true, xxxx: trie} $ scope.erors = function () {return $ ngmodel.Schauen wir uns zuerst die Ausführungsergebnisse an:
Beim Eingeben einer ungültigen E -Mail -Adresse:
Beim Eingeben der richtigen E -Mail -Adresse:
Die Errortip -Direktive beginnt mit dem Erhalt des NgModelController durch Forderung: "Ngmodel". Erstellen Sie dann ein Element, um den Fehler in das Eingabefeld anzuzeigen.
Hier wird $ Compile verwendet, und $ Compile wird verwendet, um HTML -Inhalte dynamisch zu kompilieren und anzuzeigen.
Wenn ein Fehlerinhalt vorliegt, wird das falsche Element angezeigt.
Warum können Subscope Access Haserror- und Fehlermethoden?
Wegen der Prototypkette. Schauen Sie sich einfach das Bild unten an, um zu wissen.
Fehlerinhalt anpassen
OK, es ist offensichtlich, dass die Form zur Formüberprüfung jetzt nicht verfügbar ist. Wir müssen den zu angezeigten Fehlerinhalt anpassen, und es gibt mehr als einen Fehler, der angezeigt werden muss.
Verwenden Sie die NG-Repeat, um mehrere Fehler anzuzeigen, dh den Befehl "errortip" verwenden
TIP = '<span ng-if = "haserror ()"> {{fehler () | JSON}} </span> ';Wechsel zu:
TIP = '<ul ng-if = "haserror ()" ng-repeat = "(errorkey, errorValue) in fehlern ()">' +'<span ng-if = "ERRORVALUE"> {{ERRALKEY | ERRORFILTER}} </span> ' +' </ul> ';wobei ERRAGEFILTER ein Filter für die benutzerdefinierte Anzeige von Fehlermeldungen ist. Ein Filter ist eigentlich eine Funktion.
Der Code ist wie folgt:
.Filter ("ERRORFILTER", function () {return function (input) {var errorMessagesmap = {E -Mail: "Bitte geben Sie die richtige E -Mail -Adresse ein", xxoo: "Nicht für Kinder geeignet"} return errormessagesmap [input];}});Die Ergebnisse sind wie folgt:
OK, hier können wir mit der Überprüfung der "einfachen" Form des Formulars umgehen. Ja, einfach. Wir müssen weiterhin tiefer gehen.
Benutzerdefinierte Formularüberprüfung!
Implementieren wir dann eine Formularüberprüfung, die nicht in "Handsome Guy" eingegeben werden kann.
Die Anweisungen sind wie folgt:
.Directive ("DonotinPutHandsomeboy", Funktion ($ compile) {return {Restrict: "a", benötigen: "ngmodel", link: function ($ scope, $ element, $ attrs, $ ngmodel) {$ ngmodel. $ error wird {hübsch: true} $ ngmodel.Die Ergebnisse sind wie folgt:
Hier gibt es zwei wichtige Dinge, $ ngmodel. $ Parsers und $ ngmodel.
$ ngmodel. $ parsers ist ein Array. Wenn Sie Inhalte in das Eingabefeld eingeben, wird die Funktionen in $ Parsers durchquert und ausgeführt.
$ ngmodel. $ setvalidity ("hübsch", falsch); Das Einstellen von Mutesosere auf ungültige Einrichtung setzt $ ngmodel. $ Error ["hübsch"] = true;
$ Ngmodel löschen.
Hier werde ich den Prozess zusammenfassen.
-> Benutzereingabe
-> Angular führt alle Funktionen in $ Parsers aus
-> $ setvalidity inspizieren ("xxoo", false); Dann wird XXOO auf $ ngmodel eingestellt. $ error ["xxoo"]
-> Dann wird die Errortip-Anweisung $ ngmodel wiederholt. $ Fehler
-> Fehlerfilter entgeht der Fehlermeldung
-> Die Fehlermeldung wurde am Ende angezeigt
Passen Sie den Anzeigeinhalt des Eingabefelds an
Oft ist die Entwicklung nicht so einfach wie die Überprüfung von Fehlern und das Anzeigen von Fehlern. Manchmal müssen wir den Inhalt des Eingangsfelds formatieren.
Zum Beispiel wird "1000" als "1.000" angezeigt
"Hallo" erscheint als "Hallo"
Implementieren wir nun automatische Initialen.
Der Quellcode lautet wie folgt:
<Formular name = "Form" nomovalate = "novalidate"> <input name = "text" type = "text" ng-model = "name" obere kase> </form> .directive ("obercase", function () {return return {Einschränkung: "a", verlangt: "ngmodel", link: function ($ scope, $ element, $ attrs, $ ngmodel) {$ ngmodel. ViewValue [0] .ToUpperCase () + ViewValue.Substring (1); // Set den Schnittstelleninhalt $ ngmodel.Hier verwenden wir $ setViewValue und $ render, $ setViewValue, um das ViewValue auf den angegebenen Wert festzulegen, und $ Render zeigt das ViewValue auf die Schnittstelle an.
Viele Leute denken, dass die Verwendung von $ setViewValue die Schnittstelle aktualisieren kann, aber nicht $ Render verwendet wird, und am Ende wurde die Schnittstelle nicht aktualisiert, egal was es tut.
Wenn $ ngmodel. $ Parsers nicht ausreicht, wird $ parsers nur ausgelöst, wenn der Benutzer neue Inhalte im Eingabefeld eingibt. Eine andere Situation ist, dass der Inhalt des Eingangsfelds aktualisiert werden muss:
Das ist eine beitreiche Bindung. Zum Beispiel ist das Eingabefeld gerade jetzt an $ scope.name in MainController gebunden. Wenn der Benutzer $ scope.name auf andere Weise in "Hallo" ändert, kann die Kapitalisierung des ersten Buchstabens im Eingabefeld nicht angezeigt werden.
Zu diesem Zeitpunkt müssen Sie $ Formatters verwenden. Sehen wir uns also zuerst ein Beispiel an.
<body ng-controller = "mainController"> <Formular name = "Form" novalidat = "novalidate"> <button ng-klick = "random ()"> random </button> <input name = "text" type = "text" ng-model = "name" obere case> </body> </body> </body> </body> </body>
MainController -Inhalt:
Angular.module ("App", []). Controller ("MainController", Funktion ($ scope, $ timeout) {$ scope.random = function () {$ scope.name = "hello" + math.random ();}})Es ist einfach genug. Wenn Sie auf die Schaltfläche klicken, wird $ scope.name zu einem zufälligen Inhalt, beginnend mit Hallo.
Es ist offensichtlich, dass der anfängliche Hello -Brief nicht aktiviert ist, nicht das, was wir wollen.
Wir ändern den Inhalt des folgenden Befehls:
.Directive ("Großbuchstaben", function () {retrict {begrenzt: "a", benötigen: "ngmodel", link: function ($ scope, $ element, $ attrs, $ ngmodel) {$ ngmodel. $ ngmodel. Undefined und alle Inhalte in die String -Funktion handeln.Um zusammenzufassen:
1.
-> Der Benutzer gibt Inhalte in das Eingabefeld ein
-> Winkeltraversal der Funktion in $ ngmodel.
-> In der Funktion im $ ngmodel. $ Parsers-Array modifizieren wir $ ngmodel.
2.
-> Generieren Sie zufällige Zeichenfolgen durch Schaltflächen, die so eingestellt werden sollen, dass sie benannt sind
-> Jedes Mal, wenn die schmutzige Erkennung bestimmt, ob der Wert des Namens mit $ ngmodel nicht stimmt. $ ModelValue (hier wird mit $ watch implementiert). Wenn das inkonsistente, durch alle Funktionen in $ Formatoren in umgekehrter Reihenfolge iteriert und ausführt, und den endgültigen Rückgabewert $ ngmodel zuweisen. $ ViewValue
-> Aktualisieren Sie den Inhalt des Eingabefeldes
Kann das Beispiel "Anpassen des Anzeigeinhalts des Eingangsfelds" optimiert werden?
Warum optimieren?
Der Grund ist sehr einfach. Um "benutzerdefinierte Inhalte" zu implementieren, werden $ Parsers und $ Formatters verwendet. Tatsächlich ist der Inhalt der beiden sehr ähnlich! Das ist sehr wichtig.
Wie optimieren ich?
Verwenden Sie $ ngmodel. $ Validatoren.
OK, ändern Sie nun das Beispiel.
.Directive ("Großbuchstaben", function () {retrict {einschränken: "a", benötigen: "ngmodel", link: function ($ scope, $ element, $ attrs, $ ngmodel) {// 1.3 wird unterstützt. Ob man sich manuell oder modellvaluieren, $ ngmodel. UPRACEFIRSTWORD (HandleEmptyValue (modelValue)); // Setzen Sie den Schnittstelleninhalt $ ngmodel. HandleEmptyValue (Wert) {return Angular.isundefined (Wert)?Der Code ist viel einfacher und wird nur von $ ngmodel unterstützt. $ Validatoren in Version 1.3 oder höher.
Wenn der Rückgabewert von $ ngmodel. $ Validators.uppercase -Funktion falsch ist, dann $ ngmodel. Dies ähnelt $ ngmodel. $ Setvalidity ("Großbuchstaben", Falsch).