Cấp bậc tác giả:

TRAINING

[Angular][Phần 7]AngularJS Form - Biểu mẫu

Được viết bởi webmaster ngày 17/04/2016 lúc 06:21 PM
Angular form là một tập hợp các điều khiển (control) của HTML
  • 0
  • 7131

[Angular][Phần 7]AngularJS Form - Biểu mẫu

AngularJS Form - Biểu mẫu
Angular form là một tập hợp các điều khiển (control) của HTML:
  • input elements
  • select elements
  • button elements
  • textarea elements
Thử ví dụ sau:

   <div ng-app="myApp" ng-controller="formCtrl">
        <form novalidate>
        First Name:<br>
        <input type="text" ng-model="user.firstName"><br>
        Last Name:<br>
        <input type="text" ng-model="user.lastName">
        <br>
        <br>
        <button ng-click="reset()">
            RESET</button>
        </form>
        <p>
            form = {{user}}</p>
        <p>
            master = {{master}}</p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('formCtrl', function ($scope) {
            $scope.master = { firstName: "DOTNET", lastName: "GROUP" };
            $scope.reset = function () {
                $scope.user = angular.copy($scope.master);
            };
            $scope.reset();
        });
    </script>


Giải thích ví dụ:
Phương thức reset() dùng đẻ sao chép giá trị của đối tượng master vào đối tượng user bằng phương thức angular.copy(). Nếu bạn không dùng phương thức này mà gán trực tiếp master vào user, thì khi đổi giá trị user trên HTML, master cũng thay đổi vì cả 2 đối tượng cùng trỏ đến một địa chỉ biến.

Chỉ thị ng-click gọi phương thức reset() khi button được click.

AngularJS Form Validation - Xác thực
Angular cung cấp dịch vụ xác nhận và thông báo người dùng khi dữ liệu đầu vào không hợp lệ.

  <form id="form1" runat="server" ng-app="myApp" ng-controller="validateCtrl" name="myForm"
    novalidate>
    <p>
        Username:<br>
        <input type="text" name="user" ng-model="user" required>
        <span style="color: red" ng-show="myForm.user.$dirty && myForm.user.$invalid"><span
            ng-show="myForm.user.$error.required">Username không được rỗng.</span> </span>
    </p>
    <p>
        Email:<br>
        <input type="email" name="email" ng-model="email" required>
        <span style="color: red" ng-show="myForm.email.$dirty && myForm.email.$invalid"><span
            ng-show="myForm.email.$error.required">Email không được rỗng.</span> <span ng-show="myForm.email.$error.email">
                Địa chỉ email không hợp lệ.</span> </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
        myForm.email.$dirty && myForm.email.$invalid">
    </p>
    </form>
    <script>
        var app = angular.module('myApp', []);
        app.controller('validateCtrl', function ($scope) {
            $scope.user = 'Quang Lê';
            $scope.email = 'webmaster@dotnet.vn';
        });
    </script>


Giải thích ví dụ
ng-model liên kết dữ liệu đến các thẻ input trên HTML, trong ví dụ trên ta có 2 model là user và email.

Chỉ thị required do Angular định nghĩa sẵn, dùng để kiểm tra các trường có rỗng hay không và phải xuất hiện cùng ng-model trên cùng 1 thẻ.

ng-show sẽ hiển thị thẻ đang có thuộc tính là chỉ thị này và giá trị của biểu thức là true. Như ví dụ trên, biểu thức là $dirty$invalid, nếu thỏa sẽ báo lỗi và xuất hiện đối tượng $error. Ta có thể xử lý và hiển thị câu thông báo thích hợp tùy từng lỗi qua đối tương này (required không được rỗng, email địa chỉ email phải hợp lệ).

PropertyDescription
$dirtyNgười dùng đã tương tác với trường.
$validGiá trị trường hợp lệ.
$invalidGiá trị trường không hợp lệ.
$pristineNgười dùng chưa tương tác với trường.

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML