Angular.js программно задает поле формы для грязной
Я программно обновляю некоторые поля в моей форме со значением, и я хотел бы установить состояние поля $dirty
. Выполнение чего-то вроде:
$scope.myForm.username.$dirty = true;
, похоже, не работает.
Существует метод $setPristine
, который я могу использовать для reset состояния поля, но не существует метода $setDirty
?
Итак, как это можно сделать?
Я видел этот пост https://groups.google.com/forum/#!topic/angular/NQKGAFlsln4, но я не могу найти метод $setDirty
. Я использую Angular версию 1.1.5.
Ответы
Ответ 1
Так как AngularJS 1.3.4 вы можете использовать $setDirty()
для полей (source). Например, для каждого поля с ошибкой и помеченной записью вы можете сделать следующее:
angular.forEach($scope.form.$error.required, function(field) {
field.$setDirty();
});
Ответ 2
В вашем случае $scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue);
делает трюк - он делает как форму, так и поле грязным и добавляет соответствующие классы CSS.
Честно говоря, я нашел это решение в новом посте в теме по ссылке из вашего вопроса. Он отлично работал у меня, поэтому я помещаю это здесь в качестве отдельного ответа, чтобы было легче найти его.
EDIT:
Выше решение лучше всего подходит для версии Angular до 1.3.3. Начиная с версии 1.3.4, вы должны использовать недавно открытый API-метод $setDirty()
от ngModel.NgModelController
.
Ответ 3
вам нужно вручную установить $dirty
в true
и $pristine
в false
для этого поля. Если вы хотите, чтобы классы появлялись на вашем входе, вам нужно вручную добавить ng-dirty
и удалить классы ng-pristine
из этого элемента. Вы можете использовать $setDirty()
на уровне формы, чтобы сделать все это в самой форме, но не входы формы, входы формы в настоящее время не имеют $setDirty()
, как вы упомянули.
Этот ответ может измениться в будущем, поскольку они должны добавить $setDirty()
к входам, кажется логичным.
Ответ 4
Если у вас есть доступ к NgModelController (вы можете получить доступ к нему только из директивы), тогда вы можете позвонить
ngModel.$setViewValue("your new view value");
// or to keep the view value the same and just change it to dirty
ngModel.$setViewValue(ngModel.$viewValue);
Ответ 5
Сделал jsFiddle только для вас, который решает эту проблему. просто установите $dirty в true, но с $timeout 0
, поэтому он запускается после загрузки DOM.
Найдите его здесь: JsFiddle
$timeout(function () {
$scope.form.uName.$dirty = true;
}, 0);
Ответ 6
Это то, что сработало для меня
$scope.form_name.field_name.$setDirty()
Ответ 7
Вы можете использовать метод $setDirty();
. См. Документацию https://docs.angularjs.org/api/ng/type/form.FormController
Пример:
$scope.myForm.$setDirty();
Ответ 8
Вспомогательная функция для выполнения задания:
function setDirtyForm(form) {
angular.forEach(form.$error, function(type) {
angular.forEach(type, function(field) {
field.$setDirty();
});
});
return form;
}
Ответ 9
Angular 2
Для тех, кто хочет сделать то же самое в Angular 2, он очень похож, кроме того, что он удерживает форму
<form role="form" [ngFormModel]="myFormModel" (ngSubmit)="onSubmit()" #myForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input autofocus type="text" ngControl="usename" #name="ngForm" class="form-control" id="name" placeholder="Name">
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
Name is required
</div>
</div>
</form>
<button type="submit" class="btn btn-primary" (click)="myForm.ngSubmit.emit()">Add</button>
import { Component, } from '@angular/core';
import { FormBuilder, Validators } from '@angular/common';
@Component({
selector: 'my-example-form',
templateUrl: 'app/my-example-form.component.html',
directives: []
})
export class MyFormComponent {
myFormModel: any;
constructor(private _formBuilder: FormBuilder) {
this.myFormModel = this._formBuilder.group({
'username': ['', Validators.required],
'password': ['', Validators.required]
});
}
onSubmit() {
this.myFormModel.markAsDirty();
for (let control in this.myFormModel.controls) {
this.myFormModel.controls[control].markAsDirty();
};
if (this.myFormModel.dirty && this.myFormModel.valid) {
// My submit logic
}
}
}
Ответ 10
Небольшая дополнительная заметка для ответа @rmag. Если у вас есть пустые, но обязательные поля, которые вы хотите сделать грязными, используйте это:
$scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue !== undefined
? $scope.myForm.username.$viewValue : '');
Ответ 11
Я точно не знаю, почему вы пытаетесь пометить поля грязными, но я оказался в подобной ситуации, потому что я хотел, чтобы ошибки проверки отображались, когда кто-то пытался отправить недопустимую форму. Я закончил использование jQuery, чтобы удалить теги класса .ng-pristine
и добавить теги класса .ng-dirty
в соответствующие поля. Например:
$scope.submit = function() {
// `formName` is the value of the `name` attribute on your `form` tag
if (this.formName.$invalid)
{
$('.ng-invalid:not("form")').each(function() {
$(this).removeClass('ng-pristine').addClass('ng-dirty');
});
// the form element itself is index zero, so the first input is typically at index 1
$('.ng-invalid')[1].focus();
}
}