Angular 5 FormGroup Reset setzt keine Validatoren zurück




angular-reactive-forms (4)

Ich habe ein Formular auf meiner Seite und wenn ich FormGroup.reset() die Formularklasse auf ng-pristine ng-untouched FormControl.hasError(...) ng-pristine ng-untouched FormControl.hasError(...) aber FormControl.hasError(...) weiterhin true zurück. Was mache ich hier falsch?

Vorlage

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

Komponente

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/


Es ( FormGroup ) verhält sich korrekt. Für Ihr Formular sind Benutzername und Passwort erforderlich. Wenn Sie das Formular zurücksetzen, sollte es ungültig sein (dh ein Formular ohne Benutzername / Passwort ist ungültig).

Wenn ich das richtig verstehe, ist Ihr Problem hier, warum die roten Fehler nicht beim ersten Laden der Seite vorhanden sind (wobei das Formular AUCH ungültig ist), sondern beim Klicken auf die Schaltfläche angezeigt werden. Dieses Problem tritt besonders auf, wenn Sie Material verwenden.

AFAIK, <mat-error> überprüfen Sie die Gültigkeit von FormGroupDirective , nicht FormGroup , und das Zurücksetzen von FormGroup setzt FormGroup nicht zurück. Es ist ein bisschen unpraktisch, aber um <mat-error> zu löschen, müssten Sie auch FormGroupDirective zurücksetzen.

Definieren Sie dazu in Ihrer Vorlage eine Variable als solche:

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

Rufen formDirective.resetForm() in Ihrer Komponentenklasse formDirective.resetForm() :

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

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


Ich hatte auch die gleichen Probleme. Mein Problem war, dass ich mat-form-field und formGroup . Nach dem Zurücksetzen des Formulars wurde das submitted Flag nicht zurückgesetzt.

Die Lösung, die für mich funktioniert hat, ist, eine Direktive von ngForm zusammen mit formGroup und onSubmit(form) . @ViewChild('form') form; hinzugefügt @ViewChild('form') form; in component und dann habe ich this.form.resetForm();


Nach dem Lesen der Kommentare ist dies der richtige Ansatz

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

Es bestand keine Notwendigkeit, form.clearValidators()


Verschieben Sie die Übermittlungsfunktion von Ihrem Formular auf Ihre Schaltfläche und fügen Sie Ihren Schaltflächen Typen hinzu:

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






angular-reactive-forms