angular - Angular 4 Reactive form reset() 函数在重置时显示错误消息

Question

示例代码

<input type="text" formControlName="firstName" class="form-control col-md-11" [ngClass]="{ 'is-invalid': submittedCreateUserForm && fCreateuser.firstName.errors }" placeholder="First Name" />
<div *ngIf="submittedCreateUserForm && fCreateArticle.firstName.errors" class="invalid-feedback">
    <div *ngIf="fCreateuser.firstName.errors.required" style="color:red">First Name is required</div>
</div>

在调用reset()函数时，它将显示错误消息“ First Name is required ”，输入框颜色为红色。

标签： angular

Answer 1

这是目前 Angular 中的一个错误。当我们在 formGroup 上使用 reset() 时，它不应该正确地重置状态（原始和未处理的）。为了克服这个问题，我们需要在 formGroup 中的每个控件上重置和 setError 为 null。例如：

this.questionForm = this._fb.group({
      title: [null, Validators.required],
      information: [''],
    });

要正确重置 questioForm 以便我不会在视图部分显示任何验证错误，

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

你可以在这里查看他们的 git repo