AngularJS bietet eine reichhaltige Füllung von Formularen und Überprüfung. Wir können NG-Klick verwenden, um die Schaltfläche AngularJS-Klicken zu verarbeiten und dann mit den $ Dirty und $ ungültigen Flags zu überprüfen, um sie zu überprüfen. Verwenden Sie die Novalidate-Formularerklärung, um eine browserspezifische Überprüfung zu verbieten. Formelemente verwenden viele Eckaktivitäten. Schauen wir uns zuerst einen kurzen Blick auf die Ereignisse.
Ereignis
AngularJS bietet mehrere Ereignisse, die mit HTML -Steuerelementen verbunden werden können. Zum Beispiel wird NG-Klick normalerweise einer Taste zugeordnet. Die folgenden Ereignisse sind von AngularJs unterstützt.
NG-Klick
NG-DBL-Klick
ng-mousedown
ng-mausup
ng-mausENenter
Ng-Mouselave
ng-mousemove
NG-Mausover
ng-keydown
ng-keyup
ng-keypress
Ng-Change
NG-Klick
Verwenden Sie den Befehl, um auf eine Schaltfläche zu klicken, um die Daten zurückzusetzen.
<input name = "firstName" type = "text" ng-model = "FirstName" Erforderlich> <Eingabename = "Lastname" Typ = "text" ng-model = "dastname" erforderlich> <input name = "E-Mail" type = "E-Mail" ng-model = "E-Mail" E-Mail "E-Mail". $ scope.reset = function () {$ scope.firstname = "mahesh"; $ scope.lastName = "parashar"; $ scope.email = "[email protected]"; } $ scope.reset ();} </script>Daten überprüfen
Die folgenden Tracking -Fehler können verwendet werden.
$ Dirty - Die Bestimmung wurde geändert.
$ ungültig-Der Status dieses Wertes ist ungültig.
$ fehler- Zeigt den genauen Fehler an.
Beispiel
Die folgenden Beispiele zeigen alle oben genannten Anweisungen.
testangularJs.html
<html> <Head> <titels> Angular JS Forms </title> <style> Tabelle, td, td {Border: 1PX Solid Grey; Grenzkollapse: Zusammenbruch; Padding: 5px;} Tabelle Tr: N-te-child (ungerade) {Hintergrundfarbe: #f2f2f2;} Tabelle Tr: N-Child (sogar) {Hintergrundfarbe: #FFFFFF;} </style> </head> <body> <h2> AngularJs-Antrag </h2> <divroller "films Novelate> <table> <tr> <td> Vorname eingeben: </td> <td> <input name = "firstName" type = "text" ng-model = "firstname" erforderlich> <span style = "color: rot" ng-show = "studentForm.firstname. ng-show = "studentForm.firstname. $ error.Required"> Vorname ist erforderlich. && studentForm.lastName. $ Invalid "> <span ng-show =" studentForm.lastName. ng-show = "studentForm.email. $ schmutzig && studentForm.Email. $ Invalid"> <span ng-show = "studentForm.Email. ng-klick = "reset ()"> reset </button> </td> <td> <button ng-disabled = "studentForm.firstname. StudentForm.Email. $ Invalid "ng-klick =" subschritt () "> enden </button> </td> </tr> </table> </form> </div> <script> function StudentController ($ scope) {$ scope.reset = function () {$ scope.firstname =" mahesh "; "[email protected]"; } $ scope.reset ();} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>Ausgabe
Öffnen Sie TextangularJs.html in einem Webbrowser. Die Ergebnisse sind wie folgt.
Das obige ist das Wissensortieren von AngularJs -Formen. Wir werden in Zukunft weiterhin relevantes Wissen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!