Я'м, используя этот метод: http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=preview только для проверки полей на пятно. Это прекрасно работает, но я хотел бы проверить их (и таким образом показать ошибки в этих полях, если они есть), когда пользователь нажимает 'отправить' кнопку (не реально представить, но данных НГ-нажмите кнопку вызова функции)
Есть ли способ, чтобы инициировать проверку на все поля снова при нажатии на эту кнопку?
Я знаю, это'ы немного поздно для ответа, но все, что вам нужно сделать, это заставить все грязные формы. Взгляните на следующий фрагмент:
angular.forEach($scope.myForm.$error.required, function(field) {
field.$setDirty();
});
и затем вы можете проверить, если форма действительна, используя:
if($scope.myForm.$valid) {
//Do something
}
и наконец, я думаю, вы захотите изменить свой маршрут, если все выглядит хорошо:
$location.path('/somePath');
Редактировать: форма выиграли'т себе зарегистрироваться на объем до представить событие триггера. Просто использовать НГ-представить директива для вызова функции, и оберните выше в этой функции, и он должен работать.
Что работал для меня было использование функции $setSubmitted
, который впервые появился в угловой Docs в версии 1.3.20.
В событие click, где я хотел инициировать проверку, я сделал следующее:
vm.triggerSubmit = function() {
vm.homeForm.$setSubmitted();
...
}
Это было все, что потребовалось для меня. По документам ее "устанавливает формы ее представлению государственного." Это's упомянутый [здесь][1].
[1]: и quot https://code.angularjs.org/1.3.20/docs/api/ng/type/form.FormController ;здесь"
В случае если кто-то вернется к этому позже... ни один из выше работал для меня. Так что я копнул в кишках проверки угловую форму и нашел функцию они называют, чтобы выполнить валидаторы на поля. Это свойство удобно называть $проверить
.
Если у вас именная форма ссылки
, вы можете программно называть ссылки.my_field.$метод validate () для выполнения проверки полей. Например:
<div ng-form name="myForm">
<input required name="my_field" type="text" ng-blur="myForm.my_field.$validate()">
</div>
Обратите внимание, что вызов $проверка
имело последствия для вашей модели. От углового Docs для ngModelCtrl.$проверить:
работает каждый из зарегистрированных валидаторы (первый синхронный валидаторы, а затем асинхронного валидаторы). Если срок действия изменений недействительными, модель будет установлено значение undefined, если ngModelOptions.allowInvalid это правда. Если срок действия изменения в силе, она будет установить модель до последнего действующему $modelValue, т. е. либо последние анализируется значение или последнее значение из области.
Так что, если вы'вновь задумал что-то сделать с недействительным модели стоимости (как появляться сообщение о том, что так), то вы должны убедиться, что allowInvalid
имеет значение true
для вашей модели.
Вы можете использовать угловые-валидатор делать то, что вы хотите. Это'ы тупые прост в использовании.
Она:
$грязным
или на Отправить
$грязным
или отправкой формыПример
<form angular-validator
angular-validator-submit="myFunction(myBeautifulForm)"
name="myBeautifulForm">
<!-- form fields here -->
<button type="submit">Submit</button>
</form>
Если поле не проходит валидатор
, то пользователь не сможет отправить форму.
Проверьте угловые-валидатор варианты использования и примеры для получения дополнительной информации.
Отказ от ответственности: я автор радиально-валидатор
Ну, угловой способ будет позволить ей ручку проверку, - так как он делает на каждое изменение модели - и только показать результат пользователю, когда вы хотите.
В этом случае вы сами решаете, когда, чтобы показать ошибки, вы просто должны установить флаг: http://plnkr.co/edit/0NNCpQKhbLTYMZaxMQ9l?p=preview
Насколько я знаю, существует проблема подал угловой, чтобы позволить нам иметь более продвинутые формы. Поскольку она не решена, я хотел бы использовать это вместо того, чтобы изобретать все существующие методы проверки.
редактировать: но если вы настаиваете на своем пути, вот ваш измененный возиться с проверкой, прежде чем отправить. http://plnkr.co/edit/Xfr7X6JXPhY9lFL3hnOw?p=preview Контроллер транслировать событие, когда кнопка нажата, и директива проверку магии.
Один подход заключается в том, чтобы все атрибуты, чтобы быть грязным. Вы можете сделать это в каждый контроллер, но это становится очень грязным. Было бы лучше иметь какое-то общее решение.
Самый простой способ я могу думать, чтобы использовать директивы
Вот директива
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);
}
});
}
};
});
И обновить ваш HTML-форма, например:
<form ng-submit='justDoIt()'>
становится:
<form name='myForm' novalidate submit='justDoIt()'>
Увидеть полный пример здесь: http://plunker.co/edit/QVbisEK2WEbORTAWL7Gu?p=preview
Вот моя глобальная функция для показа формы сообщений об ошибках.
function show_validation_erros(form_error_object) {
angular.forEach(form_error_object, function (objArrayFields, errorName) {
angular.forEach(objArrayFields, function (objArrayField, key) {
objArrayField.$setDirty();
});
});
};
И в мои контроллеры,
if ($scope.form_add_sale.$invalid) {
$scope.global.show_validation_erros($scope.form_add_sale.$error);
}
На основе Thilak'ы ответ, который я смог придумать это решение...
Так как моя поля формы показывать только сообщения проверки, если поле является недопустимым, и был задет пользователь я был в состоянии использовать этот код срабатывает на кнопку, чтобы показать свои проблемные поля:
в
// 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 -->
в
Примечание: Я знаю, что это хак, но это было полезно для угловых 1.2 и ранее, что я'т предоставить простой механизм.
Проверка удары В изменить событие, поэтому некоторые вещи, как изменение значений программно выиграл'т вызвать его. Но инициировавшая событие изменения будут инициировать проверки. Например, с помощью jQuery:
$('#formField1, #formField2').trigger('change');
Вы можете попробовать это:
в
// 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>
в
Мне нравится этот подход в обработке проверки на нажатие кнопки.
Не нужно ничего вызывать из контроллера,
это's все справились с директивой.
на на GitHub
Я сделал что-то следующее, Чтобы сделать его работу.
<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>
В ваш контроллер, вы можете сделать;
addHeader(form, header){
let self = this;
form.$submitted = true;
...
}
Вы должны также некоторые 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%;
}