lý AngularJS click trên nút và sử dụng các cờ hiệu $dirty và $invalid để làm cho nó có hiệu lực. Sử dụng novalidate với khai báo form để vô hiệu hóa tính năng valicate của form. Phần điều khiển form sử dụng một các hiệu quả các sự biến của AngularJS.
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 41 Các sự biến
AngularJS cung cấp nhiều sự biến có thể được liên kết với phần điều khiển form của HTML. Ví dụ ng-click thường gắn với nút (button). Dưới đây là các sự biến được hỗ trợ bởi AngularJS.
ng-click ng-dbl-click ng-mousedown ng-mouseup ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-keydown ng-keyup ng-keypress ng-change ng-click
Reset dữ liệu trên form sử dụng ng-click directive của một button. <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(){
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 42
$scope.lastName = "Parashar";
$scope.email = "MaheshParashar@tutorialspoint.com";
}
$scope.reset();
}
</script>
Validate dữ liệu
Dưới đây là các biến dùng để theo dõi lỗi.
$dirty - Thông báo rằng dữ liệu bị thay đổi.
$invalid- Thông báo rằng dữ liệu nhập vào không hợp lệ.
$error- Thông báo chính xác lỗi.
Ví dụ
Dưới đây là ví dụ minh họa các directive bên trên:
testAngularJS.jsp
<html> <head>
<title>Angular JS Forms</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <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) {
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 43 }
</style> </head> <body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" 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>
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 44 </form>
</div> <script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.reset = function(){
$scope.firstName = "Mahesh"; $scope.lastName = "Parashar";
$scope.email = "MaheshParashar@tutorialspoint.com"; } $scope.reset(); }); </script> </body> </html> Kết quả
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 45
Include trong AngularJS