ANGULARJS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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

 

Cùng chuyên mục:

Thiết lập project với Angular 6

Thiết lập project với Angular 6

Ở bài trước, chúng ta đã tìm hiểu cách cài đặt môi trường cũng như…

Cài đặt môi trường cho Angular 6

Cài đặt môi trường cho Angular 6

Ở bài trước, chúng ta đã tìm hiểu vì sao chọn Angular, Angular 6 là…

Giới thiệu Angular 6x

Giới thiệu Angular 6x

Xin giới thiệu với các bạn tổng quan tất cả các bài viết học về…

Ứng dụng single page Angular 4

Ứng dụng single page Angular 4

Trong bài học này, chúng ta sẽ thực hành tạo một ứng dụng single page…

Angular 4 CLI

Angular 4 CLI

Trong bài này, chúng ta cùng tìm hiểu về Angular CLI, cách cài đặt và…

Angular 4 Material

Angular 4 Material

Trong bài này, chúng ta sẽ tìm hiểu về material - các thành phần được…

Animation trong Angular 4

Animation trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về animation trong Angular 4.

Form trong Angular 4

Form trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về form trong Angular 4, 2 cách…

Http service trong Angular 4

Http service trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về http service trong Angular 4.

Service trong Angular 4

Service trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về service trong Angular 4

Routing trong Angular 4

Routing trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về routing - cơ chế kiểm soát…

Pipe trong angular 4

Pipe trong angular 4

Trong bài này, chúng ta sẽ tìm hiểu về pipe trong Angular 4.

Directive trong Angular 4

Directive trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về directive trong Angular 4, cách tạo…

Template trong Angular 4

Template trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về template trong Angular 4

Event binding trong Angular 4

Event binding trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về event binding - cơ chế kiểm…

Data binding trong Angular 4

Data binding trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về data binding - cơ chế lấy…

Module trong Angular 4

Module trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về module trong Angular 4: cách khai…

Component trong Angular 4

Component trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về component - thành phần được sử…

Tạo project Angular 4 đầu tiên

Tạo project Angular 4 đầu tiên

Ở bài này, chúng ta sẽ đi vào tìm hiểu cách tạo project Angular 4.

Angular 4 - Cài đặt môi trường

Angular 4 - Cài đặt môi trường

Trong bài này mình sẽ hướng dẫn các bạn cài đặt một số phần mềm…

Top