angular - 如何在不重置 Angular 表单的情况下重置验证错误？

Question

我有一个 Angular 模板驱动的表单。并且我想重置所有验证错误并使其保持不变而不重置表单。
如何在 Angular 上做到这一点？
我尝试了以下方法

onAdd(form: NgForm) {

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

}

但这不起作用。

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

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

预期行为:-
当我点击提交一个空表单时，所有字段都标有错误，当我点击 add 时，它​​会添加该字段，它应该删除表单上(或添加的文件中)的错误消息。

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

Answer 1

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

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

DEMO

所以这是一种肮脏的方式，一种更可控的方式是使用 ErrorStateMatcher ，这也在 docs 中提到。有了它，您可以选择何时显示错误消息。