Các 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ỉ một nút đã 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à một trong hai 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à một trong hai dogs, tutshoặc cars.
Ví dụ về biểu mẫu AngularJS
Tên đầu tiên:
Họ:
CÀI LẠI
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> Các novalidate thuộc tính là 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ụ
Các ng ứng dụng chỉ thị xác định các ứng dụng AngularJS.
Lệnh ng-controller xác định bộ điều khiển ứng dụng.
Các ng mô hình với phím tắt chỉ hai yếu tố đầu vào cho người sử dụng đối tượng trong mô hình.
Các formCtrl điều khiển đặt giá trị ban đầu cho các bậc thầy đối tượng, và xác định các thiết lập lại () phương pháp.
Các thiết lập lại () phương pháp tập hợp những người sử dụng đối tượng tương đương với bậc thầy đối tượng.
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.