从验证中重置 Angular 7 Reactive

Question

我使用 Angular Reactive 表单作为搜索表单。我希望能够重置表单。我用以下代码做到了这一点：

<button type="reset" (click)="onReset()">
    Reset
</button>

reset 方法执行以下操作：

onReset(){
    this.myForm.reset();
    this.myForm.markAsPristine();
    this.myForm.markAsUntouched();
}

这使得所有表单控件都为空。但它不会重置表单验证。如果表单无效，我会停用提交按钮。这在我第一次使用表单时有效。单击重置后，验证不再起作用。提交表单后它似乎被取消了。

我该如何解决这个问题？我在这里缺少什么？

Answer 1

您可以通过 对响应式表单使用clearValidators()来删除特定 formGroup/formcontrol 上的验证。

 this.formGroup.clearValidators() or      
 this.formGroup.controls.controlName.clearValidators()

在此之后，您必须使用已删除的验证器更新表单控件

this.formGroup.controls.controlName.updateValueAndValidity()

这帮助我解决了同样的问题，希望它可以帮助您

Answer 2

请使用以下代码：

this.myForm.reset()
Object.keys(this.myForm.controls).forEach(key => {
  this.myForm.controls[key].setErrors(null)
});