反应形式 .reset() 不清除验证器

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