2.0K 142 47

Đã đăng vào thg 1 25, 2016 7:44 SA 5 phút đọc

805

Tìm Hiểu AngularJS - Form - Validation (P8)

Bài đăng này đã không được cập nhật trong 3 năm

Bài trước ta đã tìm hiểu về AngularJS - SQL - DOM, còn lần này ta sẽ cùng nhau tìm hiểu về Form, và một phần nữa không thể thiếu luôn gắn liền với Form mà bất kỳ một developer nào cũng từng nghe qua đó là Validation.

AngularJS FORM

Form trong AngularJS dùng cơ chế data-binding và validate các thẻ input.

Data-Binding

Thẻ input text được AngularJS cung cấp cơ chế data-binding sử dụng directive ng-model:

<input type="text" ng-model="name">

Với khai báo directive ng-model như trên, ứng dụng của ta có thể sử dụng thuộc tính name ở vị trí khác. Giá trị hiển thị của name ở vị trí được set sẽ thay đổi ngay tức thì khi ta thay đổi giá trị input nhập vào - đây chính là tác dụng của cơ chế Data-Binding.
Ví dụ:

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="utf8">
    <title>AngularJS Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-init="name='Framgia'">
        <p>Input something in the input box:</p>
        <p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
        <h1>Hello {{name}}</h1>
    </div>
</body>
</html>

Và kết quả thu được sẽ là:

Xem demo ví dụ này.

Ban đầu directive ng-init sẽ khởi tạo giá trị cho thuộc tính name là Framgia vì thế ta có kết quả Hello Framgia, ta cũng có thể truyền giá trị cho name bằng scope, khi đó ta cần thêm đoạn mã sau:

<script>
    var app = angular.module('myApp', []);
    app.controller('formCtrl', function($scope) {
        $scope.name = "Framgia";
    });
</script>

Lưu ý cần thêm directive ng-controller là formCtrl vào trong myApp nữa nhé.
Với các thẻ input còn lại cũng tương tự với thẻ input text này, nên mình sẽ nói luôn đến thẻ Checkbox.
Tương tự các thẻ input thẻ checkbox cũng được cung cấp cơ chế data-binding sử dụng directive ng-model nhưng không giống với thẻ input, thẻ checkbox chỉ có 2 giá trị true - checked hoặc false - unchecked:
Ví dụ: hiển thị ra tên công ty Framgia Viet Nam

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="utf8">
    <title>AngularJS Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <p>Check to show a company name:</p>
        <p><input type="checkbox" ng-model="var"></p>
        <h1 ng-show="var">Framgia Viet Nam</h1>
    </div>
</body>
</html>

Xem demo ví dụ này.

Đối với radio buttons, directive ng-model sẽ khai báo một thuộc tính chung cho nhóm các radio, nhưng chỉ có một radio được chọn là chứa giá trị của thuộc tính đó.
Ví dụ:

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="utf8">
    <title>AngularJS Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="">

    <form>
      <input type="radio" ng-model="myVar" value="div1">div1
      <input type="radio" ng-model="myVar" value="div2">div2
      <input type="radio" ng-model="myVar" value="div3">div3
    </form>

    <div ng-switch="myVar">
      <div ng-switch-when="div1">
         <h1>Div1</h1>
         <p>Welcome to DIV1.</p>
      </div>
      <div ng-switch-when="div2">
         <h1>Div1</h1>
         <p>Welcome to DIV2.</p>
      </div>
      <div ng-switch-when="div3">
         <h1>Div3</h1>
         <p>Welcome to DIV3.</p>
      </div>
    </div>
</body>
</html>

Xem demo ví dụ này.

ví dụ này ta có sử dụng thêm directive ng-switch để kiểm tra giá trị MyVar được chọn và hiển thị ra tương ứng.
Tương tự với selectbox ta cũng có thể làm như sau:

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="utf8">
    <title>AngularJS Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="">

    <form>
      <select ng-model="myVar">
        <option value="chosse one">
        <option value="div1">DIV1
        <option value="div2">DIV2
        <option value="div3">DIV3
      </select>
    </form>

    <div ng-switch="myVar">
      <div ng-switch-when="div1">
         <h1>Div1</h1>
         <p>Welcome to DIV1.</p>
      </div>
      <div ng-switch-when="div2">
         <h1>Div1</h1>
         <p>Welcome to DIV2.</p>
      </div>
      <div ng-switch-when="div3">
         <h1>Div3</h1>
         <p>Welcome to DIV3.</p>
      </div>
    </div>
</body>
</html>

Xem demo ví dụ này.

AngularJS Validation

AngularJS cho phép ta có thể validation các giá trị trong form từ phía máy khách (client-side) trước khi chuyển data lên server xử lý.
AngularJS theo dõi trạng thái các giá trị đầu vào (input, textarea,..) và chứa các thông tin về giá trị, việc sửa đổi hoặc là chưa sửa đổi để thực hiện valid.
Ta cũng có thể dùng chuẩn của HTML5 thể thực hiện valid, nhưng lưu ý tất cả các valid phía máy khách đều đảm bảo an toàn tuyệt đối, nên việc valid ở phía server là vẫn cần thiết.

Required

Required là thuộc tính của HTML5 yêu cầu trường input không được phép rỗng

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="utf8">
    <title>AngularJS Validation</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="">
    <form name="myForm">
        <input name="myInput" ng-model="myInput" required>
    </form>

    <p>The input's valid state is:</p>
    <h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>

Xem demo ví dụ này.

Email

cũng là một thuộc tính của HTML5 yêu cầu text nhập vào phải là một email.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="utf8">
    <title>AngularJS Validation</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="">
    <form name="myForm">
        <input name="myInput" ng-model="myInput" type="email">
    </form>

    <p>The input's valid state is:</p>
    <h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>

Xem demo ví dụ này.

Test qua bạn sẽ thấy valid này rất đơn giản, chỉ cần vài kí tự khác rỗng trước và sau kí tự @ là đã hợp lệ, nhưng bạn lại muốn thêm email phải có tên miền nhất định, @framgia.com chẳng hạn, thì chắc chắn bạn phải viết thêm method valid cho trường này rồi.
Ngoài ra phần validation còn rất nhiều cái phải nói như trạng thái của form, trạng thái của input, các class css,.. và một vài ví dụ nâng cao mình sẽ đề cập đến ở bài sau nhé.

Kết luận và tham khảo

Ở bài này phần AngularJS Form thì tương đối dễ hiểu, chủ yếu là kiến thức cũ, không có gì là khó khăn, còn phần AngularJS Validation thì có vẻ khá hay, mà bài này mới chỉ giới thiệu qua, thực hiện một valid cơ bản, nhưng thực tế làm việc ta thấy có rất nhiều form valid rất rắc rối, phức tạp vì thế ở bài tới ta sẽ cùng nhau tiếp tục tìm hiểu thêm một vài ví dụ về validation form để nắm rõ phần này nhé.
Và dưới đây là một số nguồn mình tham khảo trong khi viết bài:

http://www.w3schools.com/angular/angular_forms.asp

http://www.w3schools.com/angular/angular_validation.asp

Nếu các bạn có ý kiến đóng góp xin vui lòng để lại comment bên dưới, chúng ta sẽ cùng nhau mổ xẻ vấn đề. Xin cảm ơn!

AngularJS FORM

Data-Binding

AngularJS Validation

Required

Email

Kết luận và tham khảo

Mục lục