Question

我正在Angular6中使用一种简单的反应形式。

this.phoneForm = this._formBuilder.group({
  oldMac: new FormControl('', Validators.compose([
    Validators.required,
    Validators.pattern('')
  ])),
  newMac: ['', Validators.required],
  newModel: ['', [Validators.required]],
  targetCluster: ['', [Validators.required]],
  ownerUser: ['', [Validators.required]]
}, { updateOn: 'blur' });

要重置我正在使用this.phoneForm.reset();，它正在清除表单，但没有清除验证器，我的表单显示为无效。

请帮助

编辑：我忘了补充一点，我使用的是角材料输入。

Answer 1

您需要使用以下内容：

this.phoneForm.clearValidators();
this.phoneForm.updateValueAndValidity();  
this.phoneForm.reset();

从文档中

clearValidators()

清空同步验证器列表。

updateValueAndValidity()

重新计算控件的值和验证状态。

Answer 2

此问题与：https://github.com/angular/material2/issues/4190有关重置只是清除表单内容，从而触发验证失败，因为未提供任何值。为了从本质上重置为基本状态，应将表格标记为原始或未更改。

    Object.keys(this.form.controls).forEach(key => {
      let control = this.form.controls[key];
      control.reset(); // clear control's contents.

      // resets the control the before user interaction state
      control.markAsPristine(); 

      // As raju stated this will not only remove errors but also remove all validators.
      control.setErrors(null); 
    });

反应形式.reset（）不清除验证器

2 个答案: