html - Angular 5 FormGroup återställning återställer inte validatorer

Jag har ett formulär på min sida och när jag kallar FormGroup.reset() sätter det formulärets klass till ng-pristine ng-untouched men FormControl.hasError(...) returnerar fortfarande sant. Vad gör jag fel här?

Mall

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

Komponent

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/

Svar #1

Det (FormGroup) fungerar korrekt. Ditt formulär kräver användarnamn och lösenord, så när du återställer formuläret bör det vara ogiltigt (dvs. ett formulär utan användarnamn/lösenord är inte giltigt).

Om jag förstår rätt är ditt problem här varför de röda felen inte finns där första gången du laddar sidan (där formuläret OCKSÅ är ogiltigt) men dyker upp när du klickar på knappen. Detta problem är särskilt framträdande när du använder Material.

Såvitt jag vet, kontrollerar <mat-error> giltigheten av FormGroupDirective, inte FormGroup, och att återställa FormGroup återställer inte FormGroupDirective. Det är lite opraktiskt, men för att rensa <mat-error> skulle du också behöva återställa FormGroupDirective.

För att göra det, definiera en variabel på följande sätt i din mall:

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

Och i din komponentklass, kalla formDirective.resetForm():

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

GitHub-ärende: https://github.com/angular/material2/issues/4190

Svar #2

Förutom Harry Ninhs lösning, om du vill komma åt formDirective i din komponent utan att behöva välja en formulärknapp, då:

Mall:

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

Komponent:

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

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

  constructor(... )

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

Svar #3

Efter att ha läst kommentarerna är detta det rätta tillvägagångssättet

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

Det var inte nödvändigt att anropa form.clearValidators()

Relaterade artiklar