Angular.js以编程方式将表单字段设置为dirty

我在编程上更新我的窗体上的一些字段的值,我想设置字段状态为$dirty 。 做的事情如:

$scope.myForm.username.$dirty = true; 似乎没有工作。

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

那么怎么去做呢?

我看到这个posthttps://groups.google.com/forum/#!topic/angular/NQKGAFlsln4,但我似乎无法find$setDirty方法。 我正在使用Angular版本1.1.5。

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

 angular.forEach($scope.form.$error.required, function(field) { field.$setDirty(); }); 

在你的情况, $scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue); 诀窍 – 它使forms和领域肮脏,并追加适当的CSS类。

说实话,我从你的问题的链接中find了这个解决scheme的新主题。 它对我来说是完美的,所以我把这个作为一个独立的答案,使它更容易被发现。

编辑:

以上解决scheme最适合1.3.3以下的angular度版本。 从1.3.4开始,你应该使用ngModel.NgModelController新暴露的API方法$setDirty()

您必须手动将$dirty设置$dirty true ,将$pristinefalse 。 如果你想让这些类出现在你的input中,那么你将不得不手动添加ng-dirty并从元素中删除ng-pristine类。 你可以在表单级使用$setDirty()来完成表单本身的所有操作,但不是表单input,表单input目前没有$setDirty()正如你所提到的那样。

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

如果你有权访问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); 

为了解决这个问题,只为你做了一个jsFiddle。 简单地把$ dirty设置为true,但是用$timeout 0所以它在DOM被加载后运行。

在这里find: JsFiddle

 $timeout(function () { $scope.form.uName.$dirty = true; }, 0); 

这是为我工作

 $scope.form_name.field_name.$setDirty() 

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

例:

 $scope.myForm.$setDirty(); 

辅助function来完成这项工作:

 function setDirtyForm(form) { angular.forEach(form.$error, function(type) { angular.forEach(type, function(field) { field.$setDirty(); }); }); return form; } 

angular2

对于想要在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 } } } 

@ rmag的答案附加的小注释。 如果你有空的,但是你需要使脏的必填字段使用这个:

 $scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue !== undefined ? $scope.myForm.username.$viewValue : ''); 

我不确定你为什么要把域名标记为脏,但是我发现自己处于类似的情况,因为我想在有人试图提交无效表单时显示validation错误。 我结束了使用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(); } }