在 reset() 表单后出现角度验证消息答案

【问题标题】：Angular validation messages appears after reset() form在 reset() 表单后出现角度验证消息
【发布时间】：2019-04-27 13:45:40
【问题描述】：

在调用reset() 后，我尝试在没有验证错误消息的情况下清除表单。

我的表单在加载时看起来很干净，这是预期的：但是，如果用户按下注册按钮，并且出现错误，我会触发form.reset() 方法。我希望表单看起来像上图，因为触摸、原始、脏道具都与最初加载表单时一样。但相反，它清除了值，但向我显示了验证错误。谁能帮我把它恢复到初始状态，显示一个没有验证错误的清晰表格？这是一种反应形式。如果您需要更多信息，请与我们联系。谢谢！

【问题讨论】：

标签： angular forms angular-reactive-forms angular-validation

【解决方案1】：

看起来您正在使用 Angular 材质。如果是这样，您也必须重置 FormGroupDirective，仅重置 FormGroup 是不够的。

private registerForm(fData: any,formDirective: FormGroupDirective): void {
    formDirective.resetForm();
    this.RegForm.reset();
}

<form [formGroup]="RegForm" #formDirective="ngForm" 
   (ngSubmit)="registerForm(RegForm,formDirective)">

【讨论】：

谢谢！！那行得通。如果使用角度计量，我不知道额外的步骤

【解决方案2】：

你在用这样的东西吗？

// Reactive Form

constructor(private _builder:FormBuilder) {
    this.createForm();
}

createForm() {
    this.form = this._builder.group({
        key: this.value,
    });
}

// Option 1
resetForm() {
    this.form.reset();
}

// Option 2 - create form again
resetForm() {
    this.createForm()
}

// Template Form

---- HTML ----
<form #myForm="ngForm"></form>

---- TS ----
@ViewChild('myForm') myForm;

resetForm() {
   if (this.myForm) {
      this.myForm.reset();
   }
}

【讨论】：

感谢您的建议米沙尔。第一个答案对我有用。

【解决方案3】：

static resetForm(formGroup: FormGroup) {
    let control: AbstractControl = null;
    formGroup.reset();
    formGroup.markAsUntouched();
    Object.keys(formGroup.controls).forEach((name) => {
      control = formGroup.controls[name];
      control.setErrors(null);
    });
  }

【讨论】：

虽然这段代码 sn-p 可以解决问题，including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【解决方案4】：

您可以使用表单的.markAsPristine() 方法重置验证：

this.RegForm.reset();
this.RegForm.markAsPristine();

【讨论】：