Angular 5 FormGroup reset не сбрасывает валидаторы

у меня есть форма на моей странице и когда я называю FormGroup.reset() Он устанавливает класс forms в ng-pristine ng-untouched но FormControl.hasError(...) все еще возвращает истину. Что я здесь делаю не так?

шаблон

<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/

16
angular angular-reactive-forms

2 ответов

он (FormGroup) ведет себя правильно. Ваша форма требует имя пользователя и пароль, поэтому при сбросе формы она должна быть недействительной (т. е. форма без имени пользователя/пароля недействительна).

если я правильно понимаю, ваша проблема здесь в том, почему красные ошибки не существуют при первой загрузке страницы (где форма также недействительна), но всплывают при нажатии кнопки. Эта проблема особенно заметна, когда вы используете материал.

насколько я знаю, <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

34

переместите функцию отправки из формы на кнопку и добавьте типы к кнопкам:

<form [formGroup]="createForm">
  <button (click)="submitForm()" type="submit">Submit</button>
  <button (click)="createForm.reset()" type="reset">Reset</button>
</form>
-1