Tôi rất mới đối với anglejs. Giả sử ứng dụng của tôi có biểu mẫu. Sử dụng trình kiểm tra, tôi nhận thấy rằng nếu anglejs nghĩ rằng biểu mẫu không hợp lệ, nó sẽ thêm một lớp ng-không hợp lệ vào biểu mẫu. Đáng yêu.
Vì vậy, có vẻ như để kiểm tra xem biểu mẫu có hợp lệ hay không, tôi cần kiểm tra mã của mình bằng công cụ chọn Jquery ?! Cách anglejs để chỉ ra tính hợp lệ của biểu mẫu mà không cần sử dụng trình điều khiển biểu mẫu là gì?
Câu trả lời:
Khi bạn đặt <form>thẻ bên trong ngApp, AngularJS sẽ tự động thêm bộ điều khiển biểu mẫu (thực tế có một chỉ thị, được gọi là formthêm hành vi cần thiết). Giá trị của thuộc tính name sẽ bị ràng buộc trong phạm vi của bạn; vì vậy một cái gì đó như <form name="yourformname">...</form>sẽ làm hài lòng:
Biểu mẫu là một thể hiện của FormController. Thể hiện biểu mẫu có thể được tùy chọn xuất bản vào phạm vi bằng cách sử dụng thuộc tính name.
Vì vậy, để kiểm tra tính hợp lệ của biểu mẫu, bạn có thể kiểm tra giá trị của thuộc $scope.yourformname.$validtính của phạm vi.
Bạn có thể nhận thêm thông tin tại phần Hướng dẫn của nhà phát triển về biểu mẫu.
$scope.yourformname.$valid.
$scope.myformname = {};
ng-showthay vì ng-if, đã bị undefinedlỗi.
Thí dụ
<div ng-controller="ExampleController">
<form name="myform">
Name: <input type="text" ng-model="user.name" /><br>
Email: <input type="email" ng-model="user.email" /><br>
</form>
</div>
<script>
angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
//if form is not valid then return the form.
if(!$scope.myform.$valid) {
return;
}
}]);
</script>
Bạn cũng có thể dùng myform.$invalid
Ví dụ
if($scope.myform.$invalid){return;}
hình thức
Nếu thuộc tính name được chỉ định, bộ điều khiển biểu mẫu được xuất bản trên phạm vi hiện tại dưới tên này.
Bí danh: ngForm
Trong Angular, các biểu mẫu có thể được lồng vào nhau. Điều này có nghĩa là biểu mẫu bên ngoài là hợp lệ khi tất cả các biểu mẫu con cũng hợp lệ. Tuy nhiên, các trình duyệt không cho phép lồng các phần tử, vì vậy Angular cung cấp chỉ thị ngForm hoạt động giống nhau nhưng có thể được lồng vào nhau. Điều này cho phép bạn có các biểu mẫu lồng nhau, rất hữu ích khi sử dụng chỉ thị xác thực Angular trong các biểu mẫu được tạo động bằng chỉ thị ngRepeat. Vì bạn không thể tạo động thuộc tính tên của các phần tử đầu vào bằng cách sử dụng nội suy, bạn phải bọc từng tập hợp các đầu vào lặp lại trong một chỉ thị ngForm và lồng chúng vào một phần tử dạng bên ngoài.
Các lớp CSS
ng-valid được đặt nếu biểu mẫu hợp lệ.
ng-không hợp lệ được đặt nếu biểu mẫu không hợp lệ.
ng-nguyên sơ được thiết lập nếu dạng là nguyên mẫu.
ng-dirty được đặt nếu biểu mẫu bị bẩn.
ng-submit được đặt nếu biểu mẫu đã được gửi.
Hãy nhớ rằng ngAnimate có thể phát hiện từng lớp này khi được thêm và xóa.
Gửi biểu mẫu và ngăn hành động mặc định
Vì vai trò của biểu mẫu trong các ứng dụng Angular phía máy khách khác với trong các ứng dụng khứ hồi cổ điển, nên trình duyệt không nên dịch việc gửi biểu mẫu thành tải lại trang đầy đủ sẽ gửi dữ liệu đến máy chủ. Thay vào đó, một số logic javascript sẽ được kích hoạt để xử lý việc gửi biểu mẫu theo cách dành riêng cho ứng dụng.
Vì lý do này, Angular ngăn hành động mặc định (gửi biểu mẫu đến máy chủ) trừ khi phần tử có thuộc tính hành động được chỉ định.
Bạn có thể sử dụng một trong hai cách sau để chỉ định phương thức javascript nào nên được gọi khi gửi biểu mẫu:
ng Gửi chỉ thị trên phần tử biểu mẫu
ngClick chỉ thị trên nút đầu tiên hoặc trường nhập của loại gửi (đầu vào [loại = gửi])
Để ngăn trình xử lý thực thi kép, chỉ sử dụng một trong các lệnh ngSubmit hoặc ngClick.
Điều này là do các quy tắc gửi biểu mẫu sau trong đặc tả HTML:
Nếu một biểu mẫu chỉ có một trường đầu vào thì việc nhấn enter trong trường này sẽ kích hoạt gửi biểu mẫu (ngSubmit) nếu một biểu mẫu có từ 2 trường nhập trở lên và không có nút nào hoặc input[type=submit]sau đó nhấn enter sẽ không kích hoạt gửi nếu biểu mẫu có một hoặc nhiều trường đầu vào và một hoặc nhiều nút hoặc input[type=submit]sau đó nhấn enter trong bất kỳ trường đầu vào nào sẽ kích hoạt trình xử lý nhấp chuột trên nút đầu tiên hoặc input[type=submit](ngClick) và trình xử lý gửi trên biểu mẫu kèm theo (ngSubmit).
Mọi thay đổi ngModelOptions đang chờ xử lý sẽ diễn ra ngay lập tức khi gửi biểu mẫu kèm theo. Lưu ý rằng các sự kiện ngClick sẽ xảy ra trước khi mô hình được cập nhật.
Sử dụng ngSubmit để có quyền truy cập vào mô hình đã cập nhật.
app.js :
angular.module('formExample', [])
.controller('FormController', ['$scope', function($scope) {
$scope.userType = 'guest';
}]);
Hình thức :
<form name="myForm" ng-controller="FormController" class="my-form">
userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span>
userType = {{userType}}
myForm.input.$valid = {{myForm.input.$valid}}
myForm.input.$error = {{myForm.input.$error}}
myForm.$valid = {{myForm.$valid}}
myForm.$error.required = {{!!myForm.$error.required}}
</form>
Nguồn: AngularJS: API: form