12/08/2018, 15:35
Form trong AngularJS
AngularJS bổ sung cho form các tính năng về filling và validation. Bạn có thể dùng ng-click directive để xử lý sự kiện click chuột 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 ...
AngularJS bổ sung cho form các tính năng về filling và validation. Bạn có thể dùng ng-click directive để xử lý sự kiện click chuột 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ự kiện của AngularJS.
Các sự kiện trong AngularJS
AngularJS cung cấp nhiều sự kiệ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ự kiệ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
Giới thiệu ng-click directive trong AngularJS
Reset dữ liệu của form bởi sử dụng ng-click directive của một nút.
<input ten="ho" type="text" ng-model="Ho" required>
<input ten="ten" type="text" ng-model="Ten" required>
<input ten="email" type="email" ng-model="email" required>
<button ng-click="reset()">Reset</button>
<script>
function sinhvienController($scope) {
$scope.reset = function(){
$scope.Ho = "Nguyen Van";
$scope.Ten = "A";
$scope.email = "nguyenvana@gmail.com";
}
$scope.reset();
}
</script>
Validate dữ liệu trong AngularJS
Dưới đây là các biến dùng để theo dõi lỗi.
- $$irty - Thông báo rằng dữ liệu bị thay đổi.
- $$nvalid- Thông báo rằng dữ liệu nhập vào không hợp lệ.
- $$rror- Thông báo chính xác lỗi.
Ví dụ
Dưới đây là ví dụ minh họa các directive đã giới thiệu ở trên trong ứng dụng AngularJS:
testAngularJS.html
<html>
<head>
<title>Angular JS Forms</title>
<script src = "https://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) {
background-color: #ffffff;
}
</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>
</form>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.reset = function(){
$scope.firstName = "A";
$scope.lastName = "Nguyen";
$scope.email = "nguyenvana@gmail.com";
}
$scope.reset();
});
</script>
</body>
</html>
Kết quả
Tham khảo: Tutorialspoint
