Detaillierte Erläuterung der AngularJS-Formularverwendung

Detaillierte Erläuterung der AngularJS-Formularverwendung_AngularJS

WBOY

Freigeben： 2016-05-16 15:54:39

Original

953 Leute haben es durchsucht

AngularJS bietet umfangreiche Formularausfüllung und -validierung. Wir können ng-click verwenden, um AngularJS-Klickschaltflächenereignisse zu verarbeiten, und dann die Flags $dirty und $invalid zur Überprüfung verwenden. Verwenden Sie die Formulardeklaration novalidate, um jegliche browserspezifische Validierung zu deaktivieren. Formularsteuerelemente verwenden viele Winkelaktivitäten. Werfen wir zunächst einen kurzen Blick auf die relevanten Ereignisse.
Veranstaltung

AngularJS bietet mehrere Ereignisse, die HTML-Steuerelementen zugeordnet werden können. Beispielsweise wird ng-click normalerweise mit Schaltflächen in Verbindung gebracht. Im Folgenden sind die von AngularJS unterstützten Ereignisse aufgeführt.

ng-klick
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-Tastendruck
ng-change

ng-klick

Das Formular setzt die Daten mit dem Befehl zum Klicken auf eine Schaltfläche zurück.

<input name="firstname" type="text" ng-model="firstName" required>
<input name="lastname" type="text" ng-model="lastName" required>
<input name="email" type="email" ng-model="email" required>
<button ng-click="reset()">Reset</button>
<script>
  function studentController($scope) { 
   $scope.reset = function(){
     $scope.firstName = "Mahesh";
     $scope.lastName = "Parashar";
     $scope.email = "MaheshParashar@yiibai.com";
 }  
  $scope.reset();
}
</script>

Nach dem Login kopieren

Verifizierungsdaten

Sie können den Tracking-Error unten verwenden.

$dirty – Der angegebene Wert wurde geändert.
$invalid – Der Status dieses Werts ist ungültig.
$error- gibt den genauen Fehler an.

Beispiel

Das folgende Beispiel demonstriert alle oben genannten Befehle.
testAngularJS.html

<html>
<head>
<title>Angular JS Forms</title>
<style>
table, th , td {
 border: 1px solid grey;
 border-collapse: collapse;
 padding: 5px;
}
table tr:nth-child(odd) {
 background-color: #f2f2f2;
}
table tr:nth-child(even) {
 background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="0">
<tr><td>Enter first name:</td><td><input name="firstname" type="text" ng-model="firstName" required>
  <span style="color:red" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">
   <span ng-show="studentForm.firstname.$error.required">First Name is required.</span>
  </span>
</td></tr>
<tr><td>Enter last name: </td><td><input name="lastname" type="text" ng-model="lastName" required>
  <span style="color:red" ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid">
   <span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>
  </span>
</td></tr>
<tr><td>Email: </td><td><input name="email" type="email" ng-model="email" length="100" required>
<span style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid">
   <span ng-show="studentForm.email.$error.required">Email is required.</span>
  <span ng-show="studentForm.email.$error.email">Invalid email address.</span>
  </span>
</td></tr>
<tr><td><button ng-click="reset()">Reset</button></td><td><button 
 ng-disabled="studentForm.firstname.$dirty && studentForm.firstname.$invalid ||
   studentForm.lastname.$dirty && studentForm.lastname.$invalid ||
   studentForm.email.$dirty && studentForm.email.$invalid"
 ng-click="submit()">Submit</button></td></tr>
</table>
</form>
</div>
<script>
function studentController($scope) { 
  $scope.reset = function(){
 $scope.firstName = "Mahesh";
 $scope.lastName = "Parashar";
 $scope.email = "MaheshParashar@yiibai.com";
  }  
  $scope.reset();
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Nach dem Login kopieren

Ausgabe

Öffnen Sie textAngularJS.html in Ihrem Webbrowser. Sehen Sie sich die Ergebnisse unten an.

2015617100230750.png (715×347)