Bài 11: Directive input trong AngularJS - AngularJS căn bản
Nói về input thì có nhiều loại lắm, ví dụ như checkbox, textbox, select, radio, textarea, .. vậy phải chăng hôm nay chúng ta đang tìm hiểu món này? Không phải nhé các bạn, hôm nay chúng ta chỉ tìm hiểu chung chung thôi không thuộc thể loại trên. Nhưng vì là input không khai báo type nên mặc định ...
Nói về input thì có nhiều loại lắm, ví dụ như checkbox, textbox, select, radio, textarea, .. vậy phải chăng hôm nay chúng ta đang tìm hiểu món này? Không phải nhé các bạn, hôm nay chúng ta chỉ tìm hiểu chung chung thôi không thuộc thể loại trên. Nhưng vì là input không khai báo type nên mặc định trình duyệt hiểu đó là textbox đấy :D.
1. Tìm hiểu Directive input trong AngularJS
Khi chúng ta sử dụng các thẻ HTML input kết hợp với ng-model thì no sẽ cung cấp các liên kết giữa model với nơi được binding, và nó sẽ sinh ra một key trong $scope để lưu trữ giá trị này nên thông thường bạn có thể dụng ng-bind hoặc là biểu thức {{key}} đều được.
2. Danh sách các Directives thường đi kèm với input
Sau đây là danh sách các Directives thường hay sử dụng chung với input, mỗi directive sẽ có các cách sử dụng khác nhau và chúng ta sẽ nghiên cứu từng phần ở các bài sau nhé
3. Ví dụ sử dụng Directive input trong AngularJS
Bây giờ chúng ta sẽ làm một ví dụ nho nhỏ đó là xây dựng chức năng đăng nhập với hai thông tin nhập vào là tên đăng nhập và mật khẩu. Các rule như sau:
- Nếu tên đăng nhập là admin và mật khẩu là 123456 thì thông báo là đăng nhập thành công, ngược lại thông báo đăng nhập thất bại.
- Với tên đăng nhập chỉ chấp nhận các ký tự chữ cái và số, bắt buộc nhập và sử dung ng-trim để xóa khoảng trắng và dài từ 3 đến 10 ký tự
- Với mật khẩu dài từ 3 đến 10 ký tự và dùng ng-trim để xóa khoảng trắng
- Nếu những quy tắc trên không thỏa thì các chữ label sẽ có màu đỏ (dùng css style cho class
ng-invalidcó color:red)
Nội dung như sau:
XEM DEMO
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ sử dụng Directive ng-Form</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<style>
.ng-invalid{
color:red;
}
</style>
<script>
angular.module('myapp', [])
.controller('ExampleController', ['$scope', function($scope) {
// Khi submit form thì chạy hàm này
$scope.login = function()
{
// nếu người dùng có nhập nội dung thì lưu nó vào list
if ($scope.username == 'admin' && $scope.password == '123456'){
alert('Đăng Nhập Thành Công');
}
else {
alert('Đăng Nhập Thất Bại');
}
};
}]);
</script>
</head>
<body ng-app="myapp">
<h1>Đăng Nhập</h1>
<form ng-controller="ExampleController" name="myForm" ng-submit="login()">
User name: <br/>
<input type="text" name="userName" ng-pattern="/^([a-zA-Z0-9]+)$/" ng-model="username" ng-trim="true" required ng-minlength="3" ng-maxlength="10" /> <br/>
Password: <br/>
<input type="text" name="userPass" ng-model="password" required ng-minlength="3" ng-maxlength="10" ng-trim="true"> <br/><br/>
<input type="submit" value='Login'/>
</form>
</body>
</html>
Chạy lên và thưởng thức nhé các bạn, mỗi đoạn code đều đáp ứng yêu cầu của đề bài.
3. lời kết
Công nhận mấy bài này ngắn thật, mới đọc một chút xíu đã hết rồi :D. Trong bài này các bạn chỉ cần hiểu rằng khi làm việc với input trong angularjs thì nó có hỗ trợ chúng ta những directive giúp validate thông tin của form như chiều dài tối thiểu và tối đa, dựa vào những directive này thì ta hoàn toàn kiểm soát được dữ liệu người dùng nhập vào. ở những bài tiếp theo chúng ta sẽ tìm hiểu từng thành phần luôn nhé.
