Angululaire 5 FormGroup réinitialise doesn'#39;t reset validateurs

Question

J'ai un formulaire sur ma page et quand je l'appelle définit la classe de formulaires à, mais retourne toujours `` véridique. Qu'est-ce que je fais de mal ici ?

modèle

composant

Plunker Plunker

http://embed.plnkr.co/Hlivn4/

Answer 1

C' (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é d' FormGroupDirective, pas FormGroup, et la réinitialisation FormGroup n'est pas réinitialisée FormGroupDirective. C'est un peu gênant, mais pour éliminer <mat-error> vous devez réinitialiser FormGroupDirective ainsi.

Pour ce faire, dans votre modèle, définir une variable comme suit:

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

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

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

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

Answer 2

Après avoir lu les commentaires, c'est la bonne approche

Il n'était pas nécessaire d'appeler ``

Answer 3

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

modèle:

composant:

Answer 4

J'ai constaté qu'après avoir appelé resetForm() et réinitialisé(), soumis n'était pas réinitialisé et est resté aussi vrai, provoquant des messages d'erreur à afficher. Cette solution a fonctionné pour moi. Je l'ai trouvé tout en recherchant une solution pour appeler sélectionner() et se concentrer() sur une balise d'entrée, qui ne fonctionnait pas non plus comme prévu. Il suffit d'envelopper vos lignes dans un setTimeout(). C'est un peu un hack, mais fait l'affaire.

Answer 5

J'avais aussi le même ensemble de problèmes. Mon problème était que j'utilisais et . Après avoir réinitialisé le drapeau de forme `` n'a pas été réinitialiser.

Donc, la solution qui a fonctionné pour moi est, mettre une directive de avec et de passage ```` . supplémentaire en composant et puis j'ai utilisé``