AngularJS - Biểu mẫu

AngularJS làm phong phú thêm việc điền và xác nhận biểu mẫu. Chúng ta có thể sử dụng sự kiện ng-click để xử lý nút bấm và sử dụng cờ $ dơ bẩn và $ không hợp lệ để thực hiện xác nhận một cách liền mạch. Sử dụng novalidate với khai báo biểu mẫu để vô hiệu hóa bất kỳ xác thực trình duyệt cụ thể nào. Các điều khiển biểu mẫu sử dụng nhiều các sự kiện AngularJS. Hãy để chúng tôi xem xét các sự kiện đầu tiên.

Sự kiện

AngularJS cung cấp nhiều sự kiện liên quan đến các điều khiển HTML. Ví dụ, chỉ thị ng-click thường được liên kết với một nút. AngularJS hỗ trợ các sự kiện sau:

ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
ng-change

ng-click

Đặt lại dữ liệu của biểu mẫu bằng cách sử dụng chỉ thị khi nhấp chuột của một nút.

<input name = "firstname" type = "text" ng-model = "firstName" required>
<input name = "lastname" type = "text" ng-model = "lastName" required>
<input name = "email" type = "email" ng-model = "email" required>
<button ng-click = "reset()">Reset</button>

<script>
   function studentController($scope) { 
      $scope.reset = function() {
         $scope.firstName = "Mahesh";
         $scope.lastName = "Parashar";
         $scope.email = "[email protected]";
      }   
      
      $scope.reset();
   }
</script>

Xác thực dữ liệu

Sau đây có thể được sử dụng để theo dõi lỗi.

$dirty - cho biết rằng giá trị đã được thay đổi.
$invalid - nói rằng giá trị đã nhập không hợp lệ.
$error - nêu lỗi chính xác.

Thí dụ

Ví dụ sau đây sẽ giới thiệu tất cả các lệnh được đề cập ở trên.

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Forms</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
      
   </head>
   <body>
      
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
         
         <form name = "studentForm" novalidate>
            <table border = "0">
               <tr>
                  <td>Enter first name:</td>
                  <td><input name = "firstname" type = "text" ng-model = "firstName" required>
                     <span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid">
                        <span ng-show = "studentForm.firstname.$error.required">First Name is required.</span>
                     </span>
                  </td>
               </tr>
               
               <tr>
                  <td>Enter last name: </td>
                  <td><input name = "lastname"  type = "text" ng-model = "lastName" required>
                     <span style = "color:red" ng-show = "studentForm.lastname.$dirty && studentForm.lastname.$invalid">
                        <span ng-show = "studentForm.lastname.$error.required">Last Name is required.</span>
                     </span>
                  </td>
               </tr>
               
               <tr>
                  <td>Email: </td><td><input name = "email" type = "email" ng-model = "email" length = "100" required>
                     <span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid">
                        <span ng-show = "studentForm.email.$error.required">Email is required.</span>
                        <span ng-show = "studentForm.email.$error.email">Invalid email address.</span>
                     </span>
                  </td>
               </tr>
               
               <tr>
                  <td>
                     <button ng-click = "reset()">Reset</button>
                  </td>
                  <td>
                     <button ng-disabled = "studentForm.firstname.$dirty &&
                        studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
                        studentForm.lastname.$invalid || studentForm.email.$dirty &&
                        studentForm.email.$invalid" ng-click="submit()">Submit</button>
                  </td>
               </tr>
					
            </table>
         </form>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.reset = function() {
               $scope.firstName = "Mahesh";
               $scope.lastName = "Parashar";
               $scope.email = "[email protected]";
            }
            
            $scope.reset();
         });
      </script>
      
   </body>
</html>

Đầu ra

Mở tệp testAngularJS.htm trong trình duyệt web và xem kết quả.