Angular 验证消息出现在 reset() 表单之后

Question

调用 reset().

后，我尝试在没有验证错误消息的情况下使表单清晰明了

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

Answer 1

你在用这样的东西吗？

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

Answer 2

您似乎在使用 Angular 材料。如果是这样，您也必须重置 FormGroupDirective，仅重置 FormGroup 是不够的。

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

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

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

Answer 4

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

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

Angular 验证消息出现在 reset() 表单之后

Angular validation messages appears after reset() form

angular

forms

angular-reactive-forms

angular-validation