Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang penggunaan borang AngularJS_AngularJS

Penjelasan terperinci tentang penggunaan borang AngularJS_AngularJS

WBOYasal: 2016-05-16 15:54:39940semak imbas

AngularJS menyediakan pengisian dan pengesahan borang yang kaya. Kita boleh menggunakan ng-click untuk mengendalikan acara butang klik AngularJS, dan kemudian menggunakan bendera $dirty dan $invalid untuk pengesahan. Gunakan pengisytiharan borang novalidate untuk melumpuhkan sebarang pengesahan khusus penyemak imbas. Kawalan bentuk menggunakan banyak aktiviti sudut. Mari kita lihat acara yang berkaitan dahulu.
Acara

AngularJS menyediakan berbilang acara yang boleh dikaitkan dengan kawalan HTML. Contohnya ng-click biasanya dikaitkan dengan butang. Berikut ialah peristiwa yang disokong oleh AngularJS.

ng-klik
ng-dbl-klik
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-tekan kekunci
ng-ubah

ng-klik

Borang menetapkan semula data menggunakan perintah mengklik butang.

<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>

Data pengesahan

Anda boleh menggunakan ralat penjejakan di bawah.

$dirty - Nilai yang dinyatakan telah ditukar.
$invalid- Status nilai ini tidak sah.
$error- menunjukkan ralat yang tepat.

Contoh

Contoh berikut akan menunjukkan semua arahan di atas.
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>

Output

Buka textAngularJS.html dalam penyemak imbas web anda. Lihat hasilnya di bawah.

2015617100230750.png (715×347)

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Pengenalan ringkas kepada penggunaan pengawal AngularJS_AngularJSArtikel seterusnya：Pengenalan ringkas kepada penggunaan pengawal AngularJS_AngularJS

Artikel berkaitan

Lihat lagi