Steuerelemente (Eingabe, Auswahl, TextArea) können Benutzer Daten eingeben. Form ist eine Sammlung dieser Kontrollen mit dem Zweck der Gruppierung verbundener Kontrollen.
Formulare und Steuerelemente bieten Bestätigungsdienste an, sodass Benutzer Eingabeaufforderungen für ungültige Eingaben erhalten können. Dies bietet eine bessere Benutzererfahrung, da Benutzer sofort Feedback erhalten und wissen, wie der Fehler behoben werden kann. Denken Sie daran, dass die Kundenüberprüfung zwar eine wichtige Rolle bei der Bereitstellung einer guten Benutzererfahrung spielt, aber einfach umgangen werden kann, sodass die Kundenüberprüfung nicht vertrauenswürdig ist. Für eine sichere Anwendung ist weiterhin eine serverseitige Überprüfung erforderlich.
1. Einfache Form
Die wichtigste Anweisung zum Verständnis der Zwei-Wege-Datenbindung ist Ngmodel. NGModel bietet eine bidirektionale Datenbindung von Modell zu Ansicht und Sicht auf das Modell. Und es bietet auch APIs für andere Richtlinien, um ihr Verhalten zu verbessern.
<! DocType html> <html Lang = "Zh-cn" ng-App = "SimpleForm"> <kopf> <meta charset = "utf-8"> <titels> PropertyValuation </title> <style type = "text/cs"> .ng-cloak {display: none; } </style> </head> <body> <div ng-controller = "myctrl"> <Formnovalidat> Name: <Eingabe ng-model = "user type = "radio"> männlich <input value = "weiblich" ng-model = "user.GENDER" type = "radio"> weiblich <br/> <button ng-klick = "reset ()"> Letzte gespeicherte </button> <button ng-klick = "updous (user)" JSON}} </pre> <pre> saved = {{gespeichert | JSON}} </pre> </div> <script src = "../ Angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> var app = angular.module ("simpleform", []); app.Controller ("myctrl", function ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.copy (user);}; $ scope.reset = function () {$ scope. // Illegale Werte gründen keinen Benutzer}); </script> </body> </html>2. Verwenden Sie CSS -Klassen
Um Form, Steuerelemente und Ngmodel reich zu machen, kann die folgende Klasse hinzugefügt werden:
Verwenden Sie im folgenden Beispiel CSS, um die Gültigkeit der einzelnen Formsteuerung anzuzeigen. Im Beispiel user.name und user.email sind erforderlich, aber wenn sie geändert (schmutzig) werden, erscheint der Hintergrund rot. Dies stellt sicher, dass der Benutzer erst nach der Interaktion mit dem Formular (nach der Einreichung?) Von einem Fehler abgelenkt wird und feststellt, dass seine Gültigkeit nicht erfüllt ist.
<! DocType html> <html Lang = "zh-cn" ng-App = "CSSCASSSS"> <kopf> <meta charset = "utf-8"> <title> cssclasses </title> <style type = "text/css"> .ng-cloak {dopperia: non; } .css-form input.ng-invalid.ng-dirty {Hintergrundfarbe: #fa787e; } .css-form input.ng-valid.ng-dirty {Hintergrundfarbe: #78fa89; } </style> </head> <body> <div ng-controller = "myctrl"> <novalidat name = "Formname"> Name: <input ng-model = "user.name" type ng-model="user.gender" type="radio">Male<input value="female" ng-model="user.gender" type="radio">Female<br/> <button ng-click="reset()">RESET</button> <button ng-click="update(user)">SAVE</button> </form> <pre>form = {{user | JSON}} </pre> <pre> saved = {{gespeichert | json}} </pre> </div> <script src = "../ Angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> var app = angular.module ("csSclasses", []); app.Controller ("myctrl", function ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.copy (user);}; $ scope.reset = function () {$ scope. // Illegale Werte gründen keinen Benutzer}); </script> </body> </html>3. Bindung an Form und Kontrollzustand
In Angular ist eine Form eine Instanz von FormController. Formularinstanzen können dem Zielfernrohr mit dem Namensattribut nach Belieben ausgesetzt werden (ich verstehe es hier nicht, es gibt keine Eigenschaft im Bereich, das immer mit dem Formularnamenattribut war, aber da es eine Methode wie „Dokument. Formularname“ gibt, kann es immer noch erhalten werden). In ähnlicher Weise ist die Kontrolle eine Instanz des NgmodelController. Kontrollinstanzen können mit dem Namensattribut ähnlich ausgesetzt sein. Dies zeigt, dass die internen Eigenschaften von Form und Kontrolle für die Bindung in Ansichten unter Verwendung von Standard -Bindungsprimitiven möglich sind.
Auf diese Weise können wir das obige Beispiel erweitern, indem wir die Features folgen:
<! DocType html> <html lang = "zh-cn" ng-App = "ControlState"> <kopf> <meta charset = "utf-8"> <title> controlstate </title> <style type = "text/cs"> .ng-cloak {display: none; } .css-form input.ng-invalid.ng-dirty {Hintergrundfarbe: #fa787e; } .css-form input.ng-valid.ng-dirty {Hintergrundfarbe: #78fa89; } </style> </head> <body> <div ng-controller = "myctrl"> <novalidat name = "Formname"> Name: <input ng-model = "user.name" name = "username" type Name </span> </div> E-Mail: <Eingabe ng-model = "user.email" name = "useremail" type = "E-Mail" Erforderlich> <br/> <div ng-show = "Formname.Useremail. ng-show = "Formname.Useremail. name = "userAgree" Erforderlich/> Ich stimme zu: <Eingabe type = "text" ng-show = "user.agree" ng-model = "user ng-disabled = "isunchanged (user)"> reset </button> <button ng-klick = "updous)" ng-disabled = "FormName. $ ungültig || isunchanged (Benutzer)"> Speichern </button> </form> <pre> Form = {{{user | JSON}} </pre> <pre> saved = {{gespeichert | JSON}} </pre> </div> <script src = "../ Angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> var app = angular.module ("ControlState", []); app.Controller ("myctrl", function ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.copy (user);}; Funktion (Benutzer) {Angular.equals (Benutzer, $ scope.Save);4. Benutzerdefinierte Validierung
Angular bietet Implementierungen für die meisten öffentlichen HTML -Formularfelder (Eingabe, Text, Nummer, URL, E -Mail, Radio, Kontrollkästchen).
Wir können unser eigenes Verifizierungs-Plug-In definieren, indem wir die Anweisung im NGModel-Controller definieren (ist das der NGModelController miteinander verbunden?). Um einen Controller zu erhalten, gibt die Direktive Abhängigkeiten wie im folgenden Beispiel an (die Anweisung definiert das erforderliche Attribut im Objekt).
Modell zum Anzeigen von Update - Wenn sich das Modell ändert (http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngmodel.ngmodelController#$Setvalidity).
Ansicht zum Modell -Update - Auf eine ähnliche Weise, egal wann ein Benutzer mit einem Steuerelement interagiert, wird NgmodelController ausgelöst. $ SetViewValue. Es ist nun die Ausführung von NgModelController $ Parsers (wenn das Steuerelement den Wert aus dem DOM erhält, werden alle Methoden in diesem Array ausgeführt, die Werte werden überprüft, gefiltert oder konvertiert und auch verifiziert).
Im folgenden Beispiel werden wir zwei Richtlinien erstellen.
Der erste ist eine Ganzzahl, die für die Überprüfung verantwortlich ist, ob die Eingabe eine gültige Ganzzahl ist. Zum Beispiel ist 1.23 ein illegaler Wert, da er den Bruchteil enthält. Beachten Sie, dass wir Unschänder verwenden, um das Schieben des Schwanzes zu ersetzen, indem wir ihn in den Array -Kopf einfügen, da wir möchten, dass er zuerst ausgeführt wird und den Wert dieser Steuerung verwendet (Schätzung, dass das Array als Warteschlange verwendet wird), müssen wir die Überprüfungsfunktion ausführen, bevor die Transformation erfolgt.
Die zweite Richtlinie ist intelligent. Er wandelt "1.2" und "1,2" in eine legale schwimmende Punktzahl "1.2" um. Beachten Sie, dass wir hier nicht den HTML5 -Eingangstyp "Nummer" verwenden können, da der Browser den Benutzern nicht erlaubt, illegale Zeichen einzugeben, die wir erwarten, wie z. B. "1,2" (es erkennt nur "1.2").
<! DocType html> <html Lang = "zh-cn" ng-App = "CustomValidation"> <head> <meta charset = "utf-8"> <title> CustomValidation </title> <style type = "text/css"> .ng-cloak {display: none; } .css-form input.ng-invalid.ng-dirty {Hintergrundfarbe: #fa787e; } .css-form input.ng-valid.ng-dirty {Hintergrundfarbe: #78fa89; } </style> </head> <body> <div> <Form Novalidat name = "Formname"> <div> Größe (Integer 0-10): <Eingabe Integer type = "number" ng-model = "Größe" name = "Größe" min = "0" max = "10"/> {{{}}} <br/. Eine gültige Ganzzahl </span> <span ng-show = "Formname.Size. ng-show = "Formname.length.0ERERROR.Float"> Dies ist keine gültige Gleitpunktzahl </span> </div> </form> </div> <script src = "../ Angular-1.0.1.js" Typ = "text/javascript"> </script> <scripts type var Integer_regexp =/^/-?/d*$/; App.Directive ("Integer", function () {return {fordert: "ngmodel", // ngmodelController Link: Funktion (Scope, Ele, Attrs, Strg) {Strg. // Zertifizieren Sie und achten Sie darauf, dass $ SETVALIDY ("Ganze", RECHT). var float_regexp = /^/-?/d+(?:;, weibliche/d+)?$/; app.directive ("smartfloat", function () {return {fordere: "ngmodel", link: function (scope, ele, attrs, ctrl) {ctrl. Parsefloat (ViewValue.Replace (",", "));5. Implementierung der benutzerdefinierten Formularsteuerung (mit Ngmodel)
Angular implementiert die grundlegenden Steuerelemente aller HTML (Input, Select, TextArea) und ist für die meisten Szenarien kompetent. Wenn wir jedoch flexibler sein müssen, können wir den Zweck erreichen, die Formregelung durch das Schreiben einer Richtlinie anzupassen.
Um Kontrollen und NGModel zu entwickeln, um zusammenzuarbeiten und bidirektionale Datenbindung zu implementieren, erfordert es:
Das Implementieren der Render -Methode ist die Methode, die für die Rendern von Daten nach der Ausführung und Übergabe aller NGModelController -Methoden verantwortlich ist.
Rufen Sie die $ setViewValue -Methode auf, und das Modell muss unabhängig davon, ob der Benutzer mit der Steuerung interagiert, aktualisiert werden. Dies wird normalerweise im DOM -Event -Listener implementiert.
Sie können $ compileProvider.directive für weitere Informationen anzeigen.
Das folgende Beispiel zeigt, wie Sie einem Element, das bearbeitet werden kann, eine Zwei-Wege-Datenbindungsfunktion hinzufügt.
<! DocType html> <html lang = "zh-cn" ng-App = "CustomControl"> <kopf> <meta charset = "utf-8"> <title> CustomControl </title> <style type = "text/css"> .ng-cloak {display: none; } div [inhaltlich] {Cursor: Zeiger; Hintergrundfarbe: #D0D0D0; · src = "../ Angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> var app = angular.module ("customControl", []); app.Controller ("myctrl", function ($ scope) {$ scope.reset = function () {$ scope.content = "my Little Dada"; // Wie man ngmodelController hier bekommt? Wenn Sie wissen, können Sie mir einen Rat geben! Danke};}); app.directive ("contenteditable", function () {return {fordern: "ngmodel", link: function (scope, ele, attrs, ctrl) {// view -> model ele.bind ("Blur keyUp", function () {scope. Strg. }); </script> </body> </html>