106

我正在以编程方式使用值更新表单上的某些字段,并且我想将字段状态设置为$dirty. 做类似的事情:

$scope.myForm.username.$dirty = true;似乎不起作用。

有一种方法$setPristine可以用来重置字段的状态,但没有$setDirty方法吗?

那么如何做到这一点呢?

我看到这篇文章https://groups.google.com/forum/#!topic/angular/NQKGAFlsln4但我似乎找不到$setDirty方法。我正在使用 Angular 1.1.5 版。

4

11 回答 11

87

在您的情况下,$scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue);可以解决问题 - 它使表单和字段都变脏,并附加适当的 CSS 类。

老实说,我从您问题的链接中的主题的新帖子中找到了这个解决方案。它对我来说非常有效,所以我把它放在这里作为一个独立的答案,以便更容易找到它。

编辑:

上述解决方案最适合 Angular 版本 1.3.3。从 1.3.4 开始,您应该使用$setDirty()来自ngModel.NgModelController.

于 2014-01-16T13:24:08.563 回答
51

从 AngularJS 1.3.4 开始,您可以$setDirty()在字段 ( source ) 上使用。例如,对于每个有错误并标记为必填的字段,您可以执行以下操作:

angular.forEach($scope.form.$error.required, function(field) {
    field.$setDirty();
});
于 2014-12-16T11:07:10.937 回答
17

您将不得不手动设置该字段的$dirtytotrue$pristineto false。如果您希望类出现在您的输入中,那么您将必须手动从元素中添加ng-dirty和删除类。ng-pristine您可以$setDirty()在表单级别上使用表单本身来执行所有这些操作,但不是表单输入,表单输入当前没有$setDirty()您提到的。

这个答案将来可能会改变,因为它们应该添加$setDirty()到输入中,这似乎是合乎逻辑的。

于 2013-08-21T03:32:16.750 回答
10

如果您有权访问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);
于 2013-12-11T16:53:54.240 回答
10

为您制作了一个解决此问题的 jsFiddle。只需将 $dirty 设置为 true,但使用$timeout 0so 它在 DOM 加载后运行。

在这里找到它:JsFiddle

$timeout(function () {
  $scope.form.uName.$dirty = true;
}, 0);
于 2013-08-20T20:08:47.787 回答
7

这对我有用

$scope.form_name.field_name.$setDirty()
于 2016-02-12T06:10:15.827 回答
7

你可以使用$setDirty();方法。请参阅文档https://docs.angularjs.org/api/ng/type/form.FormController

例子:

$scope.myForm.$setDirty();
于 2016-04-07T06:02:19.853 回答
5

一个辅助函数来完成这项工作:

function setDirtyForm(form) {
    angular.forEach(form.$error, function(type) {
        angular.forEach(type, function(field) {
            field.$setDirty();
        });
    });
    return form;
}
于 2015-08-04T13:49:32.697 回答
4

角 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
        }
    }
}
于 2016-05-14T12:57:35.860 回答
3

对@rmag 答案的补充说明。如果您有要弄脏的空但必填字段,请使用:

$scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue !== undefined 
    ? $scope.myForm.username.$viewValue : '');
于 2014-08-20T18:23:38.400 回答
-1

我不确定您为什么要尝试将字段标记为脏,但我发现自己处于类似情况,因为我希望在有人尝试提交无效表单时显示验证错误。我最终使用 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();
    }
}
于 2014-02-14T23:18:37.417 回答