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

Question

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

模板

<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

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

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

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

Answer 2

// you can put this method in a module and reuse it as needed
resetForm(form: FormGroup) {

    form.reset();

    Object.keys(form.controls).forEach(key => {
      form.get(key).setErrors(null) ;
    });
}

Answer 3

除了Harry Ninh的解决方案之外，如果您想在组件中访问formDirective而不需要选择表单按钮，则：

模板：

<form 
  ...
  #formDirective="ngForm" 
>

零件：

import { ViewChild, ... } from '@angular/core';
import { NgForm, ... } from '@angular/forms';

export class MyComponent {
 ...
 @ViewChild('formDirective') private formDirective: NgForm;

  constructor(... )

  private someFunction(): void { 
    ...
    formDirective.resetForm();
  }
}

Answer 4

当尝试重置表单组中的特定表单控制器时，以下解决方案适用于我 -

 this.myForm.get('formCtrlName').reset();
 this.myForm.get('formCtrlName').setValidators([Validators.required, Validators.maxLength(45), Validators.minLength(4), Validators.pattern(environment.USER_NAME_REGEX)]);
 this.myForm.get('formCtrlName').updateValueAndValidity();

Answer 5

添加属性 -

@ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective;

并使用它而不是 this.myForm.reset();

this.formGroupDirective.resetForm();

这将重置错误显示并完成 form.reset() 的工作。但是表单以及字段仍将显示ng-invalid类

检查此答案以获取更多详细信息 - /sf/answers/3956314701/