Tôi đang sử dụng phương pháp này: http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=preview để chỉ xác thực các trường bị mờ. Điều này hoạt động tốt, nhưng tôi cũng muốn xác thực chúng (và do đó hiển thị lỗi cho các trường đó nếu có) khi người dùng nhấp vào nút 'gửi' (không phải là gửi thực sự mà là một lệnh gọi dữ liệu-ng-click đến một hàm)
Có cách nào để kích hoạt xác thực lại tất cả các trường khi nhấp vào nút đó không?
Câu trả lời:
Điều phù hợp với tôi là sử dụng $setSubmittedhàm, hàm này lần đầu tiên hiển thị trong tài liệu góc ở phiên bản 1.3.20.
Trong trường hợp nhấp chuột mà tôi muốn kích hoạt xác thực, tôi đã làm như sau:
vm.triggerSubmit = function() {
vm.homeForm.$setSubmitted();
...
}
Đó là tất cả những gì nó cần cho tôi. Theo tài liệu, nó "Đặt biểu mẫu về trạng thái đã gửi." Nó được đề cập ở đây .
ng-messagesvà chỉ hiển thị chúng khi $ error && $ dirty .
form... Tôi đã phải lặp lại tất cả các đầu vào và gọi $setDirty()chúng.
Tôi biết, đã hơi muộn để trả lời, nhưng tất cả những gì bạn cần làm là, buộc tất cả các hình thức bẩn. Hãy xem đoạn mã sau:
angular.forEach($scope.myForm.$error.required, function(field) {
field.$setDirty();
});
và sau đó bạn có thể kiểm tra xem biểu mẫu của mình có hợp lệ hay không bằng cách sử dụng:
if($scope.myForm.$valid) {
//Do something
}
và cuối cùng, tôi đoán, bạn sẽ muốn thay đổi lộ trình của mình nếu mọi thứ có vẻ ổn:
$location.path('/somePath');
Chỉnh sửa : biểu mẫu sẽ không tự đăng ký trên phạm vi cho đến khi sự kiện gửi được kích hoạt. Chỉ cần sử dụng chỉ thị ng-submit để gọi một hàm, và gói phần trên trong hàm đó, và nó sẽ hoạt động.
ng-submitchỉ thị kích hoạt theo chương trình không?
ng-submitchỉ liên kết một hàm với sự kiện gửi, tại sao không chỉ gọi hàm đó?
Trong trường hợp ai đó quay lại điều này sau đó ... Không có cách nào ở trên phù hợp với tôi. Vì vậy, tôi đã tìm hiểu sâu hơn về xác thực dạng góc và tìm thấy hàm mà họ gọi để thực thi trình xác thực trên một trường nhất định. Thuộc tính này được gọi một cách thuận tiện $validate.
Nếu bạn có một biểu mẫu đã đặt tên myForm, bạn có thể gọi theo chương trình myForm.my_field.$validate()để thực hiện xác thực trường. Ví dụ:
<div ng-form name="myForm">
<input required name="my_field" type="text" ng-blur="myForm.my_field.$validate()">
</div>
Lưu ý rằng việc gọi $validatecó ý nghĩa đối với mô hình của bạn. Từ tài liệu góc cho ngModelCtrl. $ Validate:
Chạy từng trình xác thực đã đăng ký (trình xác thực đồng bộ đầu tiên và sau đó là trình xác thực không đồng bộ). Nếu hiệu lực thay đổi thành không hợp lệ, mô hình sẽ được đặt thành không xác định, trừ khi ngModelOptions.allowInvalid là true. Nếu hiệu lực thay đổi thành hợp lệ, nó sẽ đặt mô hình thành $ modelValue hợp lệ có sẵn cuối cùng, tức là giá trị được phân tích cú pháp cuối cùng hoặc giá trị cuối cùng được đặt từ phạm vi.
Vì vậy, nếu bạn đang lên kế hoạch làm điều gì đó với giá trị mô hình không hợp lệ (như gửi một thông báo cho họ biết như vậy), thì bạn cần đảm bảo rằng giá trị allowInvalidnày được đặt truecho mô hình của bạn.
allowInvalidcó thể đọc thêm thảo luận về kết quả rất đáng ngạc nhiên "mô hình trở thành không xác định" nếu không có tại đây: github.com/angular/angular.js/issues/10035
Bạn có thể sử dụng Angular-Validator để làm những gì bạn muốn. Thật ngu ngốc khi sử dụng.
Nó sẽ:
$dirtyhoặc trênsubmit$dirtyhoặc biểu mẫu được gửiThí dụ
<form angular-validator
angular-validator-submit="myFunction(myBeautifulForm)"
name="myBeautifulForm">
<!-- form fields here -->
<button type="submit">Submit</button>
</form>
Nếu trường không vượt qua validatorthì người dùng sẽ không thể gửi biểu mẫu.
Kiểm tra các trường hợp sử dụng và ví dụ về angle-validator để biết thêm thông tin.
Tuyên bố từ chối trách nhiệm: Tôi là tác giả của Angular-Validator
Chà, cách góc cạnh là để nó xử lý xác thực, - vì nó thực hiện ở mọi thay đổi mô hình - và chỉ hiển thị kết quả cho người dùng, khi bạn muốn.
Trong trường hợp này, bạn quyết định thời điểm hiển thị lỗi, bạn chỉ cần đặt cờ: http://plnkr.co/edit/0NNCpQKhbLTYMZaxMQ9l?p=preview
Theo như tôi biết, có một vấn đề được gửi đến góc độ để cho phép chúng tôi kiểm soát biểu mẫu nâng cao hơn. Vì nó không được giải quyết, tôi sẽ sử dụng điều này thay vì phát minh lại tất cả các phương pháp xác nhận hiện có.
chỉnh sửa: Nhưng nếu bạn kiên quyết theo cách của mình, đây là bước sửa đổi của bạn với việc xác nhận trước khi gửi. http://plnkr.co/edit/Xfr7X6JXPhY9lFL3hnOw?p=preview Bộ điều khiển phát sự kiện khi nút được nhấp và lệnh thực hiện phép xác thực.
Một cách tiếp cận là buộc tất cả các thuộc tính trở nên bẩn. Bạn có thể làm điều đó trong mỗi bộ điều khiển, nhưng nó rất lộn xộn. Sẽ tốt hơn nếu có một giải pháp chung.
Cách dễ nhất mà tôi có thể nghĩ ra là sử dụng một chỉ thị
Đây là chỉ thị
myModule.directive('submit', function() {
return {
restrict: 'A',
link: function(scope, formElement, attrs) {
var form;
form = scope[attrs.name];
return formElement.bind('submit', function() {
angular.forEach(form, function(field, name) {
if (typeof name === 'string' && !name.match('^[\$]')) {
if (field.$pristine) {
return field.$setViewValue(field.$value);
}
}
});
if (form.$valid) {
return scope.$apply(attrs.submit);
}
});
}
};
});
Và cập nhật html biểu mẫu của bạn, ví dụ:
<form ng-submit='justDoIt()'>
trở thành:
<form name='myForm' novalidate submit='justDoIt()'>
Xem ví dụ đầy đủ tại đây: http://plunker.co/edit/QVbisEK2WEbORTAWL7Gu?p=preview
Đây là chức năng toàn cục của tôi để hiển thị thông báo lỗi biểu mẫu.
function show_validation_erros(form_error_object) {
angular.forEach(form_error_object, function (objArrayFields, errorName) {
angular.forEach(objArrayFields, function (objArrayField, key) {
objArrayField.$setDirty();
});
});
};
Và trong bất kỳ bộ điều khiển nào của tôi,
if ($scope.form_add_sale.$invalid) {
$scope.global.show_validation_erros($scope.form_add_sale.$error);
}
Dựa trên câu trả lời của Thilak, tôi đã có thể đưa ra giải pháp này ...
Vì các trường biểu mẫu của tôi chỉ hiển thị thông báo xác thực nếu một trường không hợp lệ và đã được người dùng chạm vào nên tôi có thể sử dụng mã này được kích hoạt bởi một nút để hiển thị các trường không hợp lệ của tôi:
// Show/trigger any validation errors for this step
angular.forEach(vm.rfiForm.stepTwo.$error, function(error) {
angular.forEach(error, function(field) {
field.$setTouched();
});
});
// Prevent user from going to next step if current step is invalid
if (!vm.rfiForm.stepTwo.$valid) {
isValid = false;
}<!-- form field -->
<div class="form-group" ng-class="{ 'has-error': rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched && rfi.rfiForm.stepTwo.Parent_Suffix__c.$invalid }">
<!-- field label -->
<label class="control-label">Suffix</label>
<!-- end field label -->
<!-- field input -->
<select name="Parent_Suffix__c" class="form-control"
ng-options="item.value as item.label for item in rfi.contact.Parent_Suffixes"
ng-model="rfi.contact.Parent_Suffix__c" />
<!-- end field input -->
<!-- field help -->
<span class="help-block" ng-messages="rfi.rfiForm.stepTwo.Parent_Suffix__c.$error" ng-show="rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched">
<span ng-message="required">this field is required</span>
</span>
<!-- end field help -->
</div>
<!-- end form field -->Lưu ý: Tôi biết đây là một bản hack, nhưng nó rất hữu ích cho Angular 1.2 trở về trước mà không cung cấp một cơ chế đơn giản.
Việc xác thực bắt đầu với sự kiện thay đổi , vì vậy một số thứ như thay đổi giá trị theo chương trình sẽ không kích hoạt sự kiện đó. Nhưng kích hoạt sự kiện thay đổi sẽ kích hoạt xác thực. Ví dụ, với jQuery:
$('#formField1, #formField2').trigger('change');
angular way.
Tôi thích cách tiếp cận này trong việc xử lý xác thực khi nhấp vào nút.
Không cần gọi bất cứ thứ gì từ bộ điều khiển,
tất cả đều được xử lý bằng một chỉ thị.
trên github
Bạn có thể thử điều này:
// The controller
$scope.submitForm = function(form){
//Force the field validation
angular.forEach(form, function(obj){
if(angular.isObject(obj) && angular.isDefined(obj.$setDirty))
{
obj.$setDirty();
}
})
if (form.$valid){
$scope.myResource.$save(function(data){
//....
});
}
}<!-- FORM -->
<form name="myForm" role="form" novalidate="novalidate">
<!-- FORM GROUP to field 1 -->
<div class="form-group" ng-class="{ 'has-error' : myForm.field1.$invalid && myForm.field1.$dirty }">
<label for="field1">My field 1</label>
<span class="nullable">
<select name="field1" ng-model="myresource.field1" ng-options="list.id as list.name for list in listofall"
class="form-control input-sm" required>
<option value="">Select One</option>
</select>
</span>
<div ng-if="myForm.field1.$dirty" ng-messages="myForm.field1.$error" ng-messages-include="mymessages"></div>
</div>
<!-- FORM GROUP to field 2 -->
<div class="form-group" ng-class="{ 'has-error' : myForm.field2.$invalid && myForm.field2.$dirty }">
<label class="control-label labelsmall" for="field2">field2</label>
<input name="field2" min="1" placeholder="" ng-model="myresource.field2" type="number"
class="form-control input-sm" required>
<div ng-if="myForm.field2.$dirty" ng-messages="myForm.field2.$error" ng-messages-include="mymessages"></div>
</div>
</form>
<!-- ... -->
<button type="submit" ng-click="submitForm(myForm)">Send</button>Tôi đã làm điều gì đó sau đây để làm cho nó hoạt động.
<form name="form" name="plantRegistrationForm">
<div ng-class="{ 'has-error': (form.$submitted || form.headerName.$touched) && form.headerName.$invalid }">
<div class="col-md-3">
<div class="label-color">HEADER NAME
<span class="red"><strong>*</strong></span></div>
</div>
<div class="col-md-9">
<input type="text" name="headerName" id="headerName"
ng-model="header.headerName"
maxlength="100"
class="form-control" required>
<div ng-show="form.$submitted || form.headerName.$touched">
<span ng-show="form.headerName.$invalid"
class="label-color validation-message">Header Name is required</span>
</div>
</div>
</div>
<button ng-click="addHeader(form, header)"
type="button"
class="btn btn-default pull-right">Add Header
</button>
</form>
Trong bộ điều khiển của bạn, bạn có thể làm;
addHeader(form, header){
let self = this;
form.$submitted = true;
...
}
Bạn cũng cần một số css;
.label-color {
color: $gray-color;
}
.has-error {
.label-color {
color: rgb(221, 25, 29);
}
.select2-choice.ui-select-match.select2-default {
border-color: #e84e40;
}
}
.validation-message {
font-size: 0.875em;
}
.max-width {
width: 100%;
min-width: 100%;
}