Angular 5 FormGroup Reset setzt Validatoren nicht zurück

Ich habe ein Formular auf meiner Seite und wenn ich FormGroup.reset()es aufrufe, setzt es die Formularklasse auf, gibt ng-pristine ng-untouchedaber FormControl.hasError(...)immer noch die Wahrheit 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. Ihr Formular erfordert Benutzername und Passwort. Wenn Sie das Formular zurücksetzen, sollte es ungültig sein (dh das Formular ohne Benutzername / Passwort ist ungültig).

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

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

Definieren Sie dazu in Ihrer Vorlage eine Variable als solche:

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

Rufen Sie in Ihrer Komponentenklasse Folgendes auf formDirective.resetForm():

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

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

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 war nicht nötig anzurufen form.clearValidators()

Wenn Sie zusätzlich zu Harry Ninhs Lösung auf die formDirective in Ihrer Komponente zugreifen möchten, ohne eine Formularschaltfläche auswählen zu müssen, gehen Sie wie folgt vor:

Vorlage:

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

Komponente:

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

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

  constructor(... )

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

Die folgende Lösung funktioniert für mich, wenn ich versuche, einen bestimmten Formular-Controller in der Formulargruppe zurückzusetzen.

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

Ich stellte fest, dass nach dem Aufruf von resetForm () und reset () die Übermittlung nicht zurückgesetzt wurde und als wahr blieb, was dazu führte, dass Fehlermeldungen angezeigt wurden. Diese Lösung hat bei mir funktioniert. Ich fand es, als ich nach einer Lösung suchte, um select () und focus () für ein Eingabe-Tag aufzurufen, was ebenfalls nicht wie erwartet funktionierte. Wickeln Sie einfach Ihre Zeilen in ein setTimeout (). Ich denke, setTimeout zwingt Angular, Änderungen zu erkennen, aber ich könnte mich irren. Es ist ein bisschen ein Hack, aber macht den Trick.

<form [formGroup]="myFormGroup" #myForm="ngForm">
    …
    <button mat-raised-button (click)="submitForm()">
</form>

submitForm() { 
    …
    setTimeout(() => {
        this.myForm.resetForm();
        this.myFormGroup.reset();
    }, 0);
}

Fügen Sie die Eigenschaft hinzu -

@ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective;

und benutze dies anstelle von this.myForm.reset();

this.formGroupDirective.resetForm();

Dadurch wird die Fehleranzeige zurückgesetzt und auch form.reset () ausgeführt. Aber das Formular zeigt zusammen mit den Feldern immer noch ng-invalidKlasse

Überprüfen Sie diese Antwort auf weitere Details - https://stackoverflow.com/a/56518781/9262627

Ich hatte auch die gleichen Probleme. Mein Problem war, dass ich mat-form-fieldund benutzte formGroup. Nach dem Zurücksetzen wurde das Formularflag submittednicht zurückgesetzt.

Die Lösung, die für mich funktioniert hat, besteht darin, eine Richtlinie zu ngFormverabschieden formGroupund zu verabschieden onSubmit(form). @ViewChild('form') form; In Komponente hinzugefügt und dann verwendet this.form.resetForm();

Bei mir hat nichts von oben funktioniert (Angular 7.2, Angular Material 7.3.7).

Versuchen Sie, mit der Submit-Methode ein angezeigtes Ereignis zu übergeben:

<form [formGroup]="group" (ngSubmit)="onSubmit($event)">
    <!-- your form here -->
</form>

Verwenden Sie es dann zum Zurücksetzen currentTargetund anschließend für Ihr Formular:

public onSubmit(event): void {
  // your code here
  event.currentTarget.reset()
  this.group.reset()
}

Einfache Lösung: Verwenden Sie die Taste mit type="reset"und funktionieren Sie submitForm()zusammen

<form [formGroup]="MyForm" (ngSubmit)="submitForm()">
  <input formControlName="Name">
  <mat-error>  
    <span *ngIf="!tunersForm.get('Name').value && tunersForm.get('Name').touched"></span>  
  </mat-error>
  <button type="reset" [disabled]="!MyForm.valid" (click)="submitForm()">Save</button>
</form>

Ich hatte kein Glück, die Formularrichtlinie zurückzusetzen. Sie können aber auch den Eingabestatus in "Ausstehend" ändern, um dies zu tun.

this.myForm.get("email").reset();
this.myForm.get("password").reset();

Für alle, denen dies helfen könnte, verwende ich Angular 9.1.9 und wollte das Formular / die Steuerelemente nicht zurücksetzen, sondern nur die Gesamtgültigkeit des Formulars, also habe ich gerade Folgendes ausgeführt:

this.registerForm.setErrors(null);

... wo registerForm: FormGroupund das die Formularfehler zurücksetzt, was zu Folgendem führt:

this.registerForm.valid

... zurückkehren true.

Das Gleiche gilt für Steuerelemente:

this.registerForm.get('email').setErrors(null)

Sobald das Formular berührt wird, werden diese Fehler ohnehin neu ausgewertet. Wenn dies nicht gut genug ist, benötigen Sie möglicherweise ein boolesches Flag, um genau dann, wenn Sie die Fehler-Benutzeroberfläche ein- / ausblenden möchten, weiter zu bestimmen.

Ich musste die Richtlinie in meinem Fall nicht berühren.

 resetForm() {
    this.myFormGroup.reset();
    this.myFormGroup.controls.food.setErrors(null);
    this.myFormGroup.updateValueAndValidity();
  } 

form.reset() funktioniert nicht mit benutzerdefinierten Formularsteuerelementen wie Angular Material, weshalb die Funktion nicht wie erwartet funktioniert.

Meine Problemumgehung dafür ist ungefähr so

    this.form.reset();
    for (let control in this.form.controls) {
      this.form.controls[control].setErrors(null);
    }

this.form.reset() Das Problem dabei ist, dass Ihre Formcontrol-Werte zurückgesetzt werden, nicht jedoch die Fehler. Sie müssen sie daher einzeln über diese Codezeile zurücksetzen

for (let control in this.form.controls) {
      this.form.controls[control].setErrors(null);
    }

Damit müssen Sie nicht verwenden, FormGroupDirectivewas für mich eine sauberere Lösung ist.

Github-Problem: https://github.com/angular/angular/issues/15741

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>