[AngularJS toàn tập] Phần 8 :Form trong angularJs
Bài đăng này đã không được cập nhật trong 3 năm
Form trong angularJs
Khi làm việc với các dự án web bạn hầu như sẽ được làm việc với form, form để người dùng đăng kí, form để người dùng đăng nhập, form tạo ticket, form tạo sản phẩm …bla bla …
Nhưng so với các form html trước đây mà bạn đã làm việc thì form với angurlajs có gì đặc biệt?
AngularJS bổ sung cho form các tính năng về filling và validation.
Những thứ này rất cần thiết khi làm việc với form phải khôn? 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 để làm việc với form 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à danh sách 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
Sử dụng sự kiện để làm việc với form
Phụ thuộc vào bạn mong muốn làm việc như thế nào với dữ liệu mà bạn sẽ chọn sự kiện tương ứng.
Angular js có rất nhiều sự kiện để làm việc với form và sau đây mình sẽ ví dụ với sự kiện ng-click.
Mình sẽ reset dữ liệu của form bằng cách sử dụng ng-click directive cho một button.
<form name="employeeForm" novalidate>
<table border="0">
<tr><td>Last name:</td><td><input name="lastname" type="text" ng-model="lastName" required></td></tr>
<tr><td>First name: </td><td><input name="firstname" type="text" ng-model="firstName" required></td></tr>
<tr><td>Email: </td><td><input name="email" type="email" ng-model="email" length="100" required></td></tr>
<tr><button ng-click="reset()">Reset</button></td><td></td></tr>
</table>
</form>
<script>
var ungdungAngularjs = angular.module("ungdungAngularjs", []);
ungdungAngularjs.controller('employeeController', function($scope) {
$scope.reset = function(){
$scope.lastName = "Linh";
$scope.firstName = "Nguyen Thanh";
$scope.email = "nguyenthanhlinh@gmail.com";
}
$scope.reset();
});
</script>
Validate dữ liệu của form với angular JS
Để validate dữ liệu, theo dõi lỗi thì Angular JS sử dụng 3 biến dưới đây:
- $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à sau đây là ví dụ minh họa các directive đã giới thiệu ở trên trong ứng dụng AngularJS:
<html>
<head>
<title>Vi du Form trong AngularJS</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) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>Ung dung AngularJS</h2>
<div ng-app="ungdungAngularjs" ng-controller="employeeController">
<form name="employeeForm" novalidate>
<table border="0">
<tr><td>Last name:</td><td><input name="lastname" type="text" ng-model="lastName" required>
<span style="color:red" ng-show="employeeForm.lastname.$dirty && employeeForm.lastname.$invalid">
<span ng-show="employeeForm.lastname.$error.required">Last name is required.</span>
</span>
</td></tr>
<tr><td>First name: </td><td><input name="firstname" type="text" ng-model="firstName" required>
<span style="color:red" ng-show="employeeForm.firstname.$dirty && employeeForm.firstname.$invalid">
<span ng-show="employeeForm.firstname.$error.required">First 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="employeeForm.email.$dirty && employeeForm.email.$invalid">
<span ng-show="employeeForm.email.$error.required">Email is required.</span>
<span ng-show="employeeForm.email.$error.email">Email is invalid.</span>
</span>
</td></tr>
<tr><td><button ng-click="reset()">Reset</button></td><td><button
ng-disabled="employeeForm.lastname.$dirty && employeeForm.lastname.$invalid ||
employeeForm.firstname.$dirty && employeeForm.firstname.$invalid ||
employeeForm.email.$dirty && employeeForm.email.$invalid"
ng-click="submit()">Submit</button></td></tr>
</table>
</form>
</div>
</body>
<script>
var ungdungAngularjs = angular.module("ungdungAngularjs", []);
ungdungAngularjs.controller('employeeController', function($scope) {
$scope.reset = function(){
$scope.lastName = "Linh";
$scope.firstName = "Nguyen Thanh";
$scope.email = "nguyenthanhlinh@gmail.com";
}
$scope.reset();
});
</script>
</html>
Các bạn có thể xem demo trực tiếp tại đây để hiểu rõ hơn https://jsfiddle.net/SonCheDinh/5jccscak/
All rights reserved
