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

问题描述

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

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

柱塞

http://embed.plnkr.co/Hlivn4/

推荐答案

它(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，<mat-error>检查FormGroupDirective而不是FormGroup的有效性，并且重置FormGroup不会重置FormGroupDirective.这有点不方便，但是要清除<mat-error>，您还需要重置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

GitHub issue: https://github.com/angular/material2/issues/4190

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