AngularJS Forms – w3seo sử dụng Biểu mẫu trong Angular JS

Posted on by mtoplistChuyên mục:Top List

Rate this post

AngularJS tạo điều kiện cho bạn tạo một Form phong phú với liên kết dữ liệu và xác nhận các điều khiển đầu vào.

Kiểm soát đầu vào là những cách để người dùng nhập dữ liệu. Form là một tập hợp các điều khiển nhằm mục đích nhóm các điều khiển có liên quan lại với nhau.

Các bài viết liên quan:

Sau đây là các điều khiển đầu vào được sử dụng trong các Form AngularJS:

  • yếu tố đầu vào
  • chọn các yếu tố
  • các yếu tố nút
  • yếu tố textarea

AngularJS cung cấp nhiều sự kiện có thể được liên kết với các điều khiển HTML. Các sự kiện này được liên kết với các phần tử đầu vào HTML khác nhau.

Các bài viết liên quan:

Sau đây là danh sách các sự kiện được hỗ trợ trong AngularJS:

  • 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

Data binding

Chỉ thị ng-model được sử dụng để cung cấp ràng buộc dữ liệu.

Hãy lấy một ví dụ trong đó lệnh ng-model liên kết bộ điều khiển đầu vào với phần còn lại của ứng dụng của bạn

Xem ví dụ này:

<!DOCTYPE html>  
<html lang="en">  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
<div ng-app="myApp" ng-controller="formCtrl">  
  <form>  
    Tên: <input type="text" ng-model="firstname">  
  </form>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('formCtrl', function($scope) {  
    $scope.firstname = "Ajeet";  
});  
</script>  
</body>  
</html>

Kết quả

Bạn cũng có thể thay đổi ví dụ theo cách sau:

Xem ví dụ này:

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
<div ng-app="">  
  <form>  
    Tên:<input type="text" ng-model="firstname">  
  </form>  
  <h2>Bạn đã nhập: {{firstname}}</h2>  
</div>  
<p>Thay đổi tên bên trong trường nhập và bạn sẽ thấy tên trong tiêu đề thay đổi tương ứng. </p>  
</body>  
</html>

Kết quả

Checkbox AngularJS

checkbox có giá trị đúng hoặc sai. Chỉ thị ng-model được sử dụng cho một checkbox.

Xem ví dụ này:

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
<div ng-app="">  
  <form>  
    Kiểm tra để hiển thị điều này:  
    <input type="checkbox" ng-model="myVar">  
  </form>  
  <h1 ng-show="myVar">Đã kiểm tra</h1>  
</div>  
<p>Thuộc tính ng-show được đặt thành true khi checkbox được chọn.</p>  
</body>  
</html>

Kết quả

Các Radio Button AngularJS

Chỉ thị ng-model được sử dụng để liên kết các Radio Button trong các ứng dụng của bạn.

Hãy lấy một ví dụ để hiển thị một số văn bản, dựa trên giá trị của các Radio Button đã chọn. Trong ví dụ này, chúng tôi cũng đang sử dụng chỉ thị ng-switch để ẩn và hiển thị các phần HTML tùy thuộc vào giá trị của các Radio Button.

Xem ví dụ này:

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body ng-app="">  
<form>  
    Chọn một chủ đề:
  <input type="radio" ng-model="myVar" value="tuts">Hướng dẫn
  <input type="radio" ng-model="myVar" value="fest">Lễ hội   
  <input type="radio" ng-model="myVar" value="news">Tin tức  
</form>  
<div ng-switch="myVar">  
  <div ng-switch-when="tuts">  
     <h1> Hướng dẫn </h1>  
     <p>Chào mừng bạn đến với các hướng dẫn hay nhất qua mạng </p>  
  </div>  
  <div ng-switch-when="fest">  
     <h1>Lễ hội</h1>  
     <p>Lễ hội nổi tiếng nhất</p>  
  </div>  
  <div ng-switch-when="news">  
     <h1> Tin tức </h1>  
     <p> Chào mừng đến với cổng thông tin.</p>  
  </div>  
</div>  
<p> Lệnh ng-switch ẩn và hiển thị các phần HTML tùy thuộc vào giá trị của các Radio Button.</p>  
</body>  
</html>

Selection box trong AngularJS

Chỉ thị ng-model được sử dụng để liên kết các hộp chọn với ứng dụng của bạn.

Xem ví dụ này:

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body ng-app="">  
<form>  
  Chọn một chủ đề:   
<select ng-model="myVar">  
    <option value="">  
    <option value="tuts">Hướng dẫn  
    <option value="fest">Lễ hội  
    <option value="news">Tin tức  
  </select>  
</form>  
<div ng-switch="myVar">  
  <div ng-switch-when="tuts">  
     <h1>Hướng dẫn</h1>  
     <p>Chào mừng bạn đến với các hướng dẫn tốt nhất qua mạng..</p>  
  </div>  
  <div ng-switch-when="fest">  
     <h1> Lễ hội </h1>  
     <p>Lễ hội nổi tiếng nhất.</p>  
  </div>  
  <div ng-switch-when="news">  
     <h1> Tin tức</h1>  
     <p>Chào mừng đến với cổng thông tin. </p>  
  </div>  
</div>  
<p> Lệnh ng-switch ẩn và hiển thị các phần HTML tùy thuộc vào giá trị của các Radio Button. </p>  
</body>  
</html>

Ví dụ về Form AngularJS

<!DOCTYPE html>  
<html>  
   <head>  
      <title>Form Angular JS</title>  
      <script src = "http://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: lightpink;  
         }  
           
         table tr:nth-child(even) {  
            background-color: lightyellow;  
         }  
      </style>  
        
   </head>  
   <body>  
        
      <h2>Ứng dụng mẫu AngularJS</h2>  
      <div ng-app = "mainApp" ng-controller = "studentController">  
           
         <form name = "studentForm" novalidate>  
            <table border = "0">  
               <tr>  
                  <td>Nhập tên:</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"> Tên là bắt buộc. </span>  
                     </span>  
                  </td>  
               </tr>  
                 
               <tr>  
                  <td>Nhập họ:</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">Họ bắt buộc.</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 là bắt buộc.</span>  
                        <span ng-show = "studentForm.email.$error.email">Địa chỉ email không hợp lệ.</span>  
                     </span>  
                  </td>  
               </tr>  
                 
               <tr>  
                  <td>  
                     <button ng-click = "reset()">Đặt lại</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 = "Sonoo";  
               $scope.lastName = "Jaiswal";  
               $scope.email = "[email protected]";  
            }  
              
            $scope.reset();  
         });  
      </script>  
        
   </body>  
</html>

AngularJS Form Validation

AngularJS cung cấp xác thực biểu mẫu phía máy khách. Nó kiểm tra trạng thái của biểu mẫu và các trường đầu vào (input, textarea, select) và cho phép bạn thông báo cho người dùng về trạng thái hiện tại.

Nó cũng lưu giữ thông tin về việc các trường đầu vào đã được chạm vào, hoặc đã được sửa đổi hay chưa.

Các lệnh sau thường được sử dụng để theo dõi lỗi trong biểu mẫu AngularJS:

  • $ dirty – cho biết rằng giá trị đã được thay đổi.
  • $ invalid – cho biết giá trị đã nhập không hợp lệ.
  • $ error – chỉ ra lỗi chính xác.
<!DOCTYPE html>  
 <html>  
   <head>  
      <title>Angular JS Forms</title>  
      <script src = "http://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: lightpink;  
         }  
           
         table tr:nth-child(even) {  
            background-color: lightyellow;  
         }  
      </style>  
        
   </head>  
   <body>  
        
      <h2>  Ứng dụng mẫu AngularJS</h2>  
      <div ng-app = "mainApp" ng-controller = "studentController">  
           
         <form name = "studentForm" novalidate>  
            <table border = "0">  
               <tr>  
                  <td> Nhập tên: </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"> Tên là bắt buộc.</span>  
                     </span>  
                  </td>  
               </tr>  
                 
               <tr>  
                  <td> Nhập họ:</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">Họ là bắt buộc.</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 là bắt buộc.</span>  
                        <span ng-show = "studentForm.email.$error.email"> Địa chỉ email không hợp lệ. </span>  
                     </span>  
                  </td>  
               </tr>  
                <tr>  
                  <td>  
                     <button ng-click = "reset()">Đặt lại</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()">Gửi</button>  
                  </td>  
               </tr>  
     </table>  
         </form>  
      </div>  
        <script>  
         var mainApp = angular.module("mainApp", []);  
         mainApp.controller('studentController', function($scope) {  
            $scope.reset = function(){  
               $scope.firstName = "Sonoo";  
               $scope.lastName = "Jaiswal";  
               $scope.email = "[email protected]";  
            }  
             $scope.reset();  
         });  
      </script>  
     </body>  
</html>

mtoplist