Question

我正在使用Angular Reactive表单作为搜索表单。我希望能够重置表格。我使用以下代码进行了此操作：

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

重置方法执行以下操作：

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

这使所有表单控件为空。但是它不会重置表单验证。如果表单无效，我将停用提交按钮。当我第一次使用表单时，此方法有效。单击重置后，验证不再起作用。提交表格后，它似乎显得ak废了。

我该如何解决？我在这里想念什么？

Answer 1

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

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

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

this.formGroup.controls.controlName.updateValueAndValidity()

这有助于我解决相同的问题，希望对您有帮助

Answer 2

您只需要以下代码：

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

Answer 3

我有一个问题，想即时更改表单的验证类型。像下面这样的组合对我来说效果很好，我在应用程序视图中摆脱了各种问题：

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();
   }
}

我希望它对您和我都一样有用！

Answer 4

请使用以下代码：

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

Answer 5

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

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

希望这对某人有所帮助：）

从验证中重置Angular 7反应性

5 个答案: