重置 Angular 7 反应式表单验证答案

【问题标题】：Reset Angular 7 Reactive From Validation重置 Angular 7 反应式表单验证
【发布时间】：2020-05-20 07:32:21
【问题描述】：

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

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

reset 方法执行以下操作：

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

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

我该如何解决这个问题？我在这里错过了什么？

【问题讨论】：

你是说reset后你的form失效了？
验证检查表单是否为空。如果为空，则表单无效，表单提交按钮将被禁用。重置表单后，如果表单为空，则不会禁用表单提交按钮。因此，我可以在重置表单后提交一个空表单。

标签： angular validation reset

【解决方案1】：

您可以使用 clearValidators() 删除特定 formGroup/formcontrol 的验证用于反应形式。

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

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

this.formGroup.controls.controlName.updateValueAndValidity()

这帮助我解决了同样的问题，希望对您有所帮助

【讨论】：

这似乎行得通，但有一点行不通。我在提交表单上使用此代码： [disabled]="!myForm.valid" 单击重置后，按钮仍然可见。只有当我更改表单中的某些内容时，它才会不可见。按下重置时似乎没有触发验证。我可以在单击重置时以某种方式手动触发验证，以便单击重置后按钮不可见吗？
这里发生的情况是，当您删除验证器时，您的表单仍然有效。所以你需要一些东西来处理按钮的禁用视图。
此解决方案不适用于 >12，因此，如果您正在寻找“解决”它的正确方法，您将考虑阅读此线程 github.com/angular/components/issues/…

【解决方案2】：

请使用以下代码：

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

【讨论】：

【解决方案3】：

我在这里聚会迟到了，对我有用的是补丁价值。这会重置将我的输入变为红色的验证器控件。

this.formgroup.patchValue({ formControlName: [null, Validators.required] });

希望这对某人有所帮助:)

【讨论】：

【解决方案4】：

我遇到了想动态更改表单验证类型的问题。像下面这样的组合对我来说效果很好，我摆脱了应用视图中的各种问题：

onChange(event: any) {
   this.valForm.controls.controlName.setErrors(null);
   this.valForm.controls.controlName.clearValidators();
   if (conditionA) {
       this.valForm.get('controlName').setValidators([Validators.required, this.patternA]);
       this.valForm.controls.controlName.updateValueAndValidity();
   } else {
       this.valForm.get('controlName').setValidators([Validators.required, this.patternB]);
       this.valForm.controls.controlName.updateValueAndValidity();
   }
}

我希望它对你和我一样有用！

【讨论】：