Bài 11: Directive input trong AngularJS

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.

Lưu ý: Input[type="file"] không support trong Directive ng-model.

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é

Tên Giá trị Chi tiết
ngModel String Khao bái key lưu vào $scope và sẽ được liên kết tới biểu thức tương ứng ({{bieuthuc}})
name String Tên của input
required String Thiết lập lỗi khi người dùng không nhập liệu
ngRequired Boolean Thiết lập thuộc tính required nếu giá trị truyền vào là true
ngMinlength Number Thiết lập chiều dài tối thiểu của giá trị nhập vào
ngMaxlength Number Thiết lập chiều dài tối đa của giá trị nhập vào
ngPattern String Biểu thức so khớp với giá trị nhập vào
ngChange String Gọi đến hàm truyền vào khi có sự kiện change
ngTrim Boolean Nếu thiết lập true thì khi lấy dữ liệu nó sẽ được trim khoảng trắng đầu và cuối

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-invalidcolor: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>
Giao diện:

login-form-voi-input-trong-angularjs.png

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

 

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.