Angulaire 5 FormGroup de réinitialisation n'est pas réinitialisé validateurs

J'ai un formulaire sur ma page, et quand je l'appelle FormGroup.reset() il définit les formes de la classe de ng-pristine ng-untouched mais FormControl.hasError(...) renvoie toujours truthy. Ce que je fais mal?

Modèle

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

Composant

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/

Pouvez-vous essayer d'appeler également this.myForm.markAsUntouched();?
Qui n'a pas de travail et ne doit pas être nécessaire en fonction de la documentation. (v2.angulaire.io/docs/ts/latest/api/formes/index/...)
Double Possible de Angulaire NgForm: réinitialiser exacte de dépôt du formulaire de la valeur n'est pas valide

OriginalL'auteur efarley | 2018-01-11

  1. 62

    ( FormGroup ) Se comporte correctement. Votre formulaire requiert le nom d'utilisateur et le mot de passe, ainsi, lorsque vous réinitialisez la forme qu'elle devrait être non valide (c'est à dire la forme avec pas de nom d'utilisateur/mot de passe n'est pas valide).

    Si je comprends bien, votre question ici, c'est pourquoi le rouge les erreurs ne sont pas là lors de la première fois que vous chargez la page (où le formulaire n'est pas valide), mais de pop-up lorsque vous cliquez sur le bouton. Ce problème est particulièrement important lorsque vous êtes à l'aide du Matériel.

    Autant que je sache, <mat-error> vérifier la validité de FormGroupDirective, pas FormGroup, et la réinitialisation de FormGroup ne réinitialise pas FormGroupDirective. C'est un peu gênant, mais pour effacer <mat-error> vous devez réinitialiser FormGroupDirective.

    Pour ce faire, dans votre modèle, définir une variable en tant que tel:

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

    Et dans votre classe de composant, appel formDirective.resetForm():

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

    GitHub question: https://github.com/angular/material2/issues/4190

    Elle fonctionne. Merci, vous avez sauvé ma journée.
    Ce problème doit être résolu, comme vous l'avez dit c'est assez gênant d'avoir à utiliser cette solution de contournement... Va faire avec elle, bonne prise & merci pour la solution.
    Dans mon cas, j'ai eu un très unique situation où j'avais besoin de réinitialiser le "soumis" sans effacer les valeurs d'un formulaire (qui resetForm()) me faisait. Pour contourner ce problème, je n'ai (<any>formDirective).submitted = false; . Espèce de sale hack mais en regardant le code source il n'y a pas de raison évidente soumis nécessaires pour être en lecture seule dans leur tapuscrit définition.
    Lire le github question où la réponse officielle n'était pas "mon service". Assez boiteux, je m'attends à mieux de les employés de google.
    Angulaire 7.2.2: Argument of type NgForm is not assignable to type FormGroupDirective

    OriginalL'auteur Harry Ninh

  2. 7
    resetForm() {

    this.loginForm.reset();

    for( let i in this.loginForm.controls ) {

        this.loginForm.controls[i].setErrors(null);
    }
}
    Ce sera tout simplement supprimer les validateurs, et non pas de les réinitialiser.
    Pour effacer les validateurs.loginform.clearValidators() , puis définir le contrôle des erreurs à null

    OriginalL'auteur Savio Rodrigues

  3. 5

    En plus de Harry Ninh solution, si vous souhaitez accéder à la formDirective dans votre composant sans avoir à sélectionner un bouton de formulaire, puis:

    Modèle:

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

    Composant:

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

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

  constructor(... )

  private someFunction(): void { 
    ...
    formDirective.resetForm();
  }
}
    Merci cela a fonctionné !!!

    OriginalL'auteur Max

  4. -2

    Déplacer la fonction envoyer à partir de votre formulaire à votre bouton et ajouter des types de boutons:

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

    OriginalL'auteur Ruben