Angular 5 FormGroup 重置不会重置验证器 [英] Angular 5 FormGroup reset doesn't reset validators

问题描述

我的页面上有一个表单，当我调用 FormGroup.reset() 时，它将表单类设置为 ng-pristine ng-untouched 但 FormControl.hasError(...) 仍然返回真值.我在这里做错了什么?

I have a form on my page and when I call FormGroup.reset() it sets the forms class to ng-pristine ng-untouched but FormControl.hasError(...) still returns truthy. What am I doing wrong here?

模板

<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm)">
  <mat-form-field>
    <input matInput formControlName="email" />
    <mat-error *ngIf="email.hasError('required')">
      Email is a required feild
    </mat-error>
  </mat-form-field>
  <mat-form-field>
    <input matInput type="password" formControlName="password" />
    <mat-error *ngIf="password.hasError('required')">
      Password is a required feild
    </mat-error>
  </mat-form-field>
  <button type="submit">Login</button>
</form>

组件

export class MyComponent {
  private myForm: FormGroup;
  private email: FormControl = new FormContorl('', Validators.required);
  private password: FormControl = new FormControl('', Validators.required);

  constructor(
    private formBuilder: FormBuilder
  ) {
    this.myForm = formBuilder.group({
      email: this.email,
      password: this.password
    });
  }

  private submitForm(formData: any): void {
    this.myForm.reset();
  }
}

Plunker

https://embed.plnkr.co/Hlivn4/

推荐答案

It (FormGroup) 行为正确.您的表单需要用户名和密码，因此当您重置表单时，它应该是无效的(即没有用户名/密码的表单无效).

It (FormGroup) behaves correctly. Your form requires username and password, thus when you reset the form it should be invalid (i.e. form with no username/password is not valid).

如果我理解正确，您的问题是为什么在您第一次加载页面(表单也无效)时没有出现红色错误，但在您单击按钮时会弹出.当您使用 Material 时，这个问题尤其突出.

If I understand correctly, your issue here is why the red errors are not there at the first time you load the page (where the form is ALSO invalid) but pop up when you click the button. This issue is particularly prominent when you're using Material.

AFAIK， 检查 FormGroupDirective 的有效性，而不是 FormGroup，并重置 FormGroup> 不会重置 FormGroupDirective.这有点不方便，但是要清除 ，您还需要重置 FormGroupDirective.

AFAIK, <mat-error> check the validity of FormGroupDirective, not FormGroup, and resetting FormGroup does not reset FormGroupDirective. It's a bit inconvenient, but to clear <mat-error> you would need to reset FormGroupDirective as well.

为此，在您的模板中，定义一个变量:

To do that, in your template, define a variable as such:

<form [formGroup]="myForm" #formDirective="ngForm" 
  (ngSubmit)="submitForm(myForm, formDirective)">

在你的组件类中，调用 formDirective.resetForm():

And in your component class, call formDirective.resetForm():

private submitForm(formData: any, formDirective: FormGroupDirective): void {
    formDirective.resetForm();
    this.myForm.reset();
}

GitHub 问题:https://github.com/angular/material2/issues/4190

这篇关于Angular 5 FormGroup 重置不会重置验证器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！