AngularJS: Form trong AngularJS

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Forms trong AngularJS cung cấp các control input để liên kết cũng như validate dữ liệu.

Control Input

Control input gồm những phần tử HTML sau:

  • Phần tửinput
  • Phần tử select
  • Phần tử button
  • Phần tử textarea

Liên kết dữ liệu

Control input cung cấp liên kết dữ liệu bằng cách sử dụng chỉ thị ng-model.

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

Ứng dụng lúc này sẽ có một thuộc tính tên firstname.

Chỉ thị ng-model sẽ liên kết controller input với phần còn lại của ứng dụng.

Thuộc tính firstname có thể được tham chiếu tới một controller:

Ví dụ

<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>
<div ng-app="myApp" ng-controller="formCtrl">
  <form>
    First Name: <input type="text" ng-model="firstname">
  </form>
</div>

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

</body>
</html>

Nó cũng có thể được tham chiếu tới những nơi khác trong ứng dụng.

Ví dụ

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <form>
    First Name: <input type="text" ng-model="firstname">
  </form>
  <h1>You entered: {{firstname}}</h1>
</div>

<p>Change the name inside the input field, and you will see the name in the header changes accordingly.</p>

</body>
</html>

Checkbox

Checkbox có giá trị true hoặc false. Ta áp dụng chỉ thị ng-model cho checkbox và sử dụng giá trị của nó trong ứng dụng.

Ví dụ

Hiện phần tử h1 nếu checkbox được check:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <form>
    Check to show a header:
    <input type="checkbox" ng-model="myVar">
  </form>
  <h1 ng-show="myVar">My Header</h1>
</div>

<p>The header's ng-show attribute is set to true when the checkbox is checked.</p>

</body>
</html>

Radiobutton

Liên kết radio button tới ứng dụng bằng cách sử dụng chỉ thi ng-model.

Radio button với cùng chỉ thị ng-model có thể có những giá trị khác nhau, nhưng chỉ có thể chọn một trong các radio..

Ví dụ

Hiển thị một số text dựa trên giá trị của radio được chọn:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">

<form>
  Pick a topic:
  <input type="radio" ng-model="myVar" value="dogs">Dogs
  <input type="radio" ng-model="myVar" value="tuts">Tutorials
  <input type="radio" ng-model="myVar" value="cars">Cars
</form>

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
    <h1>Dogs</h1>
    <p>Welcome to a world of dogs.</p>
  </div>
  <div ng-switch-when="tuts">
    <h1>Tutorials</h1>
    <p>Learn from examples.</p>
  </div>
  <div ng-switch-when="cars">
    <h1>Cars</h1>
    <p>Read about cars.</p>
  </div>
</div>

<p>The ng-switch directive hides and shows HTML sections depending on the value of the radio buttons.</p>

</body>
</html>

Giá trị của myVar sẽ có thể là dogstuts, hoặc cars.

Selectbox

Liên kết select box tới ứng dụng cũng bằng chỉ thi ng-model.

Thuộc tính được định nghĩa trong ng-model sẽ có giá trị của option được chọn trong selectbox.

Ví dụ

Hiển thị text dựa trên giá trị của option được chọn:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">

<form>
  Select a topic:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
    <h1>Dogs</h1>
    <p>Welcome to a world of dogs.</p>
  </div>
  <div ng-switch-when="tuts">
    <h1>Tutorials</h1>
    <p>Learn from examples.</p>
  </div>
  <div ng-switch-when="cars">
    <h1>Cars</h1>
    <p>Read about cars.</p>
  </div>
</div>

<p>The ng-switch directive hides and shows HTML sections depending on the value of the dropdown list.</p>

</body>
</html>

Giá trị của myVar sẽ có thể là dogstuts, hoặc cars.

Ví dụ áp dụng

 

<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>
<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: "John", lastName: "Doe" };
      $scope.reset = function () {
        $scope.user = angular.copy($scope.master);
      };
      $scope.reset();
    });
  </script>
</body>
</html>

Thuộc tính novalidate là thuộc tính mới của HTML5. Nó không cho phép validate trên bất kỳ trình duyệt nào.

Giải thích ví dụ

Chỉ thị ng-app dùng để định nghĩa ứng dụng AngularJS.

Chỉ thị ng-controller dùng để định nghĩa controller của ứng dụng.

Chỉ thị ng-model liên kết hai phần tử input tới đối tượng user trong model.

Controller formCtrl thiết lập các giá trị ban đầu cho đối tượng master và định nghĩa phương thức reset().

Phương thức reset() thiết lập đối tượng user bằng đối tượng master.

Chỉ thị ng-click sẽ gọi phương thức reset() chỉ khi nút lệnh được nhấn.

Thuộc tính novalidate không cần thiết dùng đến trong ứng dụng, nhưng thường thị bạn sẽ sử dụng nó trong các form AngularJS để ghi đè chuẩn validate của HTML5.

» Tiếp: Validate trong AngularJS
« Trước: Event trong AngularJS
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!