Formulaire de jeu Vierge, sans effacer les données

Question

J'ai un formulaire qui affiche une liste d' <input type="text"> - éléments. Ils ont tous en commun un bouton enregistrer qui est désactivé jusqu'à ce que la forme devient sale. Ensuite, une fois que l'utilisateur clique sur le bouton enregistrer, les données seront envoyées au serveur. Si le serveur a enregistré les données, je veux réinitialiser le formulaire dans un état impeccable, mais je veux garder toutes les données dans le formulaire afin que l'utilisateur peut modifier les données si elles le souhaitent.

Après recherche, j'ai trouvé l' NgForm.reset() méthode. Bien que ce ne définissez le formulaire vierge, elle aussi, malheureusement, efface le formulaire. La méthode reset ne semble pas avoir une valeur de paramètre, mais je n'arrive pas à savoir ce qu'il fait. Néanmoins, je ne veux pas que les données soient clarifiées.

J'ai aussi essayé de myForm.pristine = true , mais cela provoque un rafraîchissement de la page pour une raison quelconque.

Voici une plunkr montrant le problème.

Answer 1

Ce que vous cherchez est - myForm.form.markAsPristine().

Answer 2

Pour le moment je peux vous proposer deux solutions possibles. La première est vraiment proche de ce que vous l'avez suggéré, que la forme de l' reset méthode a la suite de la signature et accepte forme de valeur en tant que premier argument:

//@angular/forms/src/model.d.ts:
reset(value?: any, {onlySelf}?: { onlySelf?: boolean; }): void;

Dans le gestionnaire de soumission, nous allons capturer une copie du dernier état:

const { myForm: { value: formValueSnap } } = this;

Et faire la remise à zéro lui-même:

this.myForm.reset(formValueSnap, false);

Une autre option à partir de l'époque, quand il n'y a pas de possibilité de réinitialiser le formulaire, est de créer une méthode d'assistance, qui marque chaque contrôle pristine et conserver les données. Il peut être appelé dans le même soumettre helper en place de la réinitialisation.

private _markFormPristine(form: FormGroup | NgForm): void {
    Object.keys(form.controls).forEach(control => {
        form.controls[control].markAsPristine();
    });
}

Lien vers la mise à jour plunkr.

Answer 3

Si vous arrive d'être en utilisant le Modèle Piloté par les formes et vous avez quelque chose comme ceci dans votre composant: @ViewChild('myForm') myform: any;

J'ai trouvé que l' markAsPristine() est une fonction de la forme de propriété de votre formulaire. Il serait donc this.myform.form.markAsPristine().

Juste pensé que je voudrais ajouter ceci dans le cas d'autres viennent à travers markAsPristine() comme n'étant pas défini.

Answer 4

Je pense que je résolve fait ça sur ma méthode:

form.controls['contato'].reset();

Answer 5

Je n'ai pas trouvé un markAsPristine() dans l' form de la propriété, mais j'ai trouvé un _pristine de la propriété, this.myForm['form']._pristine qui peut être réglé true.

@ViewChild('myForm') myForm: ElementRef;
this.myForm['form']._pristine = true;