Angular 5 FormGroup重置不会重置验证器

Question

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

模板

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

Answer 1

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

如果我理解正确，那么这里的问题就是为什么在您第一次加载页面（表单也是无效的）时并没有出现红色错误，而是在您单击按钮时弹出了红色错误。当您使用Material时，此问题尤其突出。

AFAIK，<mat- error>请检查的有效性FormGroupDirective，而不是FormGroup，并且重置FormGroup不会重置FormGroupDirective。这有点不方便，但要清除<mat- error>您也需要重置FormGroupDirective。

为此，请在模板中定义如下变量：

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

然后在您的组件类中，调用formDirective.resetForm()：

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