[AngularJS] Phần 17: Form trong AngularJS

Các Form trong AngularJS cung cấp việc trói dữ liệu (hay liên kết dữ liệu — data-binding) và chứng thực các điều khiển đầu vào.

Điều khiển đầu vào
Các điều khiển đầu vào các phần tử input HTML như sau:

các phần tử input
các phần tử select
các phần tử button
các phần tử textarea

Trói dữ liệu (Data-Binding)
Các điều khiển đầu vào cung cấp tính năng trói dữ liệu bằng cách dùng chỉ thị ng-model.

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

Ứng dụng bây giờ đã có 1 thuộc tính có tên firstname. Chỉ thị ng-model trói các điều khiển đầu vào với toàn bộ ứng dụng. Thuộc tính firstname, có thể được truy xuất ở 1 controller như ví dụ sau:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

<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 = "Dammio";
});
</script>

</body>
</html>

Ngoài ra, thuộc tính firstname cũng có thể được truy xuất ở đâu đó trong chương trình, chẳng hạn:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>

<div ng-app="">
  <form>
    Tên: <input type="text" ng-model="firstname">
  </form>
  <h1>Bạn vừa gõ giá trị tên là: {{firstname}}</h1>
</div>

<p>Thay đổi tên bên trong trường input, và bạn sẽ thấy giá trị tên được hiển thị tương ứng --- dammio.com</p>

</body>
</html>

Checkbox
Một checkbox có giá trị true hoặc false. Áp dụng chỉ thị ng-model vào 1 checkbox, và dùng giá trị của nó trong ứng dụng như sau ví dụ sau. Ví dụ này sẽ hiển thị giá trị trong thẻ h1 khi checkbox có giá trị là true (đã nhấn chọn checkbox).

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>

<div ng-app="">
  <form>
    Nhấn chọn checkbox để hiển thị giá trị trong thẻ h1:
    <input type="checkbox" ng-model="myVar">
  </form>
  <h1 ng-show="myVar">My Header</h1>
</div>

<p>Thuộc tính ng-show được thiết lập là true khi checkbox được nhấn --- dammio.com</p>

</body>
</html>

Radio Button
Tương tự như checkbox, nút radio cũng liên kết với ứng dụng thông qua chỉ thị ng-model. Các nút radio với cùng 1 ng-model có thể có giá trị khác nhau, nhưng chỉ có duy nhất 1 nút radio được chọn trong 1 thời điểm.

Ví dụ sau hiển thị dòng chữ, dựa theo giá trị của nút radio được chọn.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="">

<form>
  Pick a topic:
  <input type="radio" ng-model="myVar" value="dogs">Chó
  <input type="radio" ng-model="myVar" value="tuts">Bài tập
  <input type="radio" ng-model="myVar" value="cars">Xe hơi
</form>

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
     <h1>Chó</h1>
     <p>Chào mừng đến với thế giới loài chó!</p>
  </div>
  <div ng-switch-when="tuts">
     <h1>Bài tập</h1>
     <p>Danh sách các bài tập</p>
  </div>
  <div ng-switch-when="cars">
     <h1>Xe hơi</h1>
     <p>Tìm hiểu về các loại xe --- dammio.com</p>
  </div>
</div>

<p>Chỉ thị ng-switch ẩn và hiện các phần HTML tùy theo giá trị của các nút radio --- dammio.com.</p>

</body>
</html>

Giá trị của biến myVar có thể là Chó, Bài tập, hay Xe hơi.

Liên quan: [Bootstrap] Phần 14: Nhóm danh sách

Select Box
Các select Box cũng dùng chỉ thị ng-show để liên kết với ứng dụng. Thuộc tính được định nghĩa trong thuộc tính ng-model sẽ có giá trị của tùy chọn được chọn trong select box. Ví dụ hiển thị văn bản, dựa trên giá trị của tùy chọn được chọn:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="">

<form>
  Select a topic:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Chó
    <option value="tuts">Bài tập
    <option value="cars">Xe hơi
  </select>
</form>

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
     <h1>Chó</h1>
     <p>Danh sách chó.</p>
  </div>
  <div ng-switch-when="tuts">
     <h1>Bài tập</h1>
     <p>Danh sách bài tập.</p>
  </div>
  <div ng-switch-when="cars">
     <h1>Xe hơi</h1>
     <p>Danh sách xe VIP.</p>
  </div>
</div>

<p>Chỉ thị ng-switch ẩn và hiện các phần HTML tùy theo giá trị được chọn trong select box --- dammio.com.</p>

</body>
</html>

Giá trị của biến myVar có thể là Chó, Bài tập, hay Xe hơi.

Ví dụ Form AngularJS

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    Tên:<br>
    <input type="text" ng-model="user.firstName"><br>
    Họ:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">Thiết lập lại</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 trong HTML5. Nó hủy bất cứ validation nào trong trình duyệt. Giải thích ví dụ trên:

Chỉ thị ng-app định nghĩa ứng dụng AngularJS
Chỉ thị ng-controller định nghĩa điều khiển ứng dụng
Chỉ thị ng-mode trói các 2 phần tử input với đối tượng người dùng (user) trong model.
Điều khiển 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 giống như đối tượng master
Chỉ thị ng-click gọi phương thức reset(), chỉ khi nút được nhấn.
Thuộc tính novalidate không cần có ứng dụng này, nhưng thường bạn sẽ dùng nó trong các form AngularJS, để ghi đè lên các validation chuẩn của HTML5.

Kết luận: Bài này đã cung cấp các bạn kiến thức cơ bản để tạo form trong AngularJS. Mời các bạn theo dõi các bài tiếp theo để tiếp tục tự học về AngularJS.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2017). [AngularJS] Phần 17: Form trong AngularJS. https://www.dammio.com/2017/05/28/angularjs-phan-17-form-trong-angularjs.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[AngularJS] Phần 17: Form trong AngularJS}, year = {2017}, url = {https://www.dammio.com/2017/05/28/angularjs-phan-17-form-trong-angularjs}, urldate = {2024-09-05} }

Kết nối