Biểu mẫu AngularJS
Biểu mẫu trong AngularJS cung cấp ràng buộc dữ liệu và xác nhận các điều khiển đầu vào.
Kiểm soát đầu vào
Điều khiển đầu vào là các yếu tố đầu vào HTML:
- yếu tố đầu vào
- chọn các yếu tố
- các yếu tố nút
- yếu tố textarea
Liên kết dữ liệu
Điều khiển đầu vào cung cấp ràng buộc dữ liệu bằng cách sử dụng
ng-modelchỉ thị.
<input type="text" ng-model="firstname">
Ứng dụng hiện có một thuộc tính được đặt tên firstname.
Lệnh ng-modelliê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.
Thuộc tính firstname, có thể được tham chiếu trong bộ điều khiển:
Thí dụ
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script>
Nó cũng có thể được tham chiếu ở những nơi khác trong ứng dụng:
Thí dụ
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Hộp kiểm
Hộp kiểm có giá trị truehoặc false. Áp dụng
ng-modelchỉ thị vào hộp kiểm và sử dụng giá trị của nó trong ứng dụng của bạn.
Thí dụ
Hiển thị tiêu đề nếu hộp kiểm được chọn:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Các nút radio
Liên kết các nút radio với ứng dụng của bạn bằng lệnh ng-model
.
Các nút radio giống nhau ng-modelcó thể có các giá trị khác nhau, nhưng chỉ giá trị đã chọn mới được sử dụng.
Thí dụ
Hiển thị một số văn bản, dựa trên giá trị của nút radio đã chọn:
<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>
Giá trị của myVar sẽ là dogs, tutshoặc
cars.
Chọn hộp
Ràng buộc các hộp chọn vào ứng dụng của bạn bằng ng-model
chỉ thị.
Thuộc tính được xác định trong ng-modelthuộc tính sẽ có giá trị của tùy chọn đã chọn trong hộp chọn.
Thí dụ
Hiển thị một số văn bản, dựa trên giá trị của tùy chọn đã chọn:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
Giá trị của myVar sẽ là dogs, tutshoặc
cars.
Ví dụ về biểu mẫu AngularJS
form = {"firstName": "John", "lastName": "Doe"}
master = {"firstName": "John", "lastName": "Doe"}
Mã ứng dụng
<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>
Thuộc tính novalidate là thuộc tính mới trong HTML5. Nó vô hiệu hóa bất kỳ xác thực trình duyệt mặc định nào.
Giải thích ví dụ
Chỉ thị ng-app xác định ứng dụng AngularJS.
Lệnh ng-controller xác định bộ điều khiển ứng dụng.
Chỉ thị ng-model liên kết hai phần tử đầu vào với đối tượng người dùng trong mô hình.
Bộ điều khiển formCtrl đặt các giá trị ban đầu cho đối tượng chính và xác định phương thức reset () .
Phương thức reset () đặt đối tượng người dùng bằng đối tượng chính .
Lệnh ng-click gọi phương thức reset () , chỉ khi nút được nhấp.
Thuộc tính novalidate không cần thiết cho ứng dụng này, nhưng thông thường bạn sẽ sử dụng nó trong các biểu mẫu AngularJS, để ghi đè xác thực HTML5 tiêu chuẩn.