如何在不重置角度表单的情况下重置验证错误？

Question

我有一个角度模板驱动的形式。我想重置所有验证错误并使其保持不变，而不重置表单。如何在角度中做到这一点？我尝试过以下方法

onAdd(form: NgForm) {

form.form.markAsPristine();
form.form.markAsUntouched();

}

但这行不通。

链接：- https://stackblitz.com/edit/angular-ezixd4

当前行为：- 当我单击提交空表单时，所有字段都标记为错误，当我单击它时add，它会添加该字段，但上述函数不会删除错误消息。

预期行为：- 当我单击提交空表单时，所有字段都标记为错误，当我单击它时add，它会添加该字段，并且它应该删除表单上（或添加的文件中）的错误消息。

在此表单中，我使用添加按钮添加输入字段，并且我想在用户有机会与表单交互之前清除所有错误消息。

Answer 1

这最终对我有用：

this.form.reset();
Object.keys(this.form.controls).forEach(key => {
    this.form.get(key).setErrors(null) ;
});

Answer 2

使用 Angular Material，您需要定义FormGroupDirective以及FormGroup和FormControl

@ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective;

import { FormGroup, FormControl, FormGroupDirective } from '@angular/forms';

使用反应式表单重置在 onSubmit 方法中重置FormGroupDirective 。

this.formGroupDirective.resetForm();
<br>
this.form.reset();

如果上面的FormGroupDirective重置不起作用，请尝试超时0秒

setTimeout(() => this.formGroupDirective.resetForm(), 0);

Answer 3

该类mat-input-invalid部分取决于submitted表单的状态。因此，当您提交表单时，该submitted属性将切换为 true。markAsPristine()或者markAsUntouched()不重置标志submitted，因此错误仍然显示。我看到两种可能性。一种快速而肮脏的方法，当我测试时，它似乎适用于你的情况。我不能保证在所有情况下都会如此，但您可以尝试一下，看看它是否有效。也就是说，您调用resetForm()它会重置submitted属性。但是，是的，您想保留设置的值..因此，我们在重置中传递表单当前状态的值：

onAdd(form: NgForm) {
  this.specification.push(++this.num);
  form.resetForm(form.value);  
}

演示版

所以这是一种肮脏的方式，一种更受控制的方式是使用ErrorStateMatcher，这也在文档中提到。这样您就可以选择何时显示错误消息。