web-dev-qa-db-fra.com

Comment réinitialiser la validation du formulaire lors de sa soumission dans ANGULAR 2

Je dois réinitialiser mon formulaire avec validation. Existe-t-il une méthode permettant de rétablir l'état de la forme de ng-dirty à ng-pristine?.

angularangular2-forms
27
Mubashir

Il semble que cela ne soit pas encore supporté ... Une solution que j'ai déjà vue consiste à recréer le formulaire après l'envoi, ce qui est évidemment fastidieux et moche.

Voir également 

4
Günter Zöchbauer

Voici comment cela fonctionne actuellement avec Angular 4.1.0 - 5.1.3:

class YourComponent {
    @ViewChild("yourForm")
    yourForm: NgForm;


    onSubmit(): void {
        doYourThing();

        // yourForm.reset(), yourForm.resetForm() don't work, but this does:
        this.yourForm.form.markAsPristine();
        this.yourForm.form.markAsUntouched();
        this.yourForm.form.updateValueAndValidity();
    }
}
36
Benny Bottema

from.resetForm ()

J'ai essayé à peu près tout, et la seule chose que j'ai trouvée qui réinitialise réellement formulaire.soumis à faux est la suivante:

Dans votre modèle, envoyez votre formulaire dans la fonction d'envoi:

<form name="form" class="form-horizontal" (ngSubmit)="f.form.valid && submit(f)" #f="ngForm" novalidate>

Dans votre fichier composant.ts, disposez des éléments suivants:

// import NgForm
import { NgForm } from '@angular/forms';

// get the passed in variable from the html file
submit(myForm: NgForm): void {

    console.log(myForm.form.status, myForm.form.dirty, myForm.form.pristine, myForm.form.untouched, myForm.submitted, myForm.dirty, myForm.pristine, myForm.untouched);

    // This is the key!
    myForm.resetForm();

    console.log(myForm.form.status, myForm.form.dirty, myForm.form.pristine, myForm.form.untouched, myForm.submitted, myForm.dirty, myForm.pristine, myForm.untouched);


}

Les valeurs du fichier console.log génèrent ce qui suit - notez qu'il réinitialise toutes les valeurs.

VALID vrai faux faux vrai vrai faux faux

INVALID faux vrai vrai faux faux vrai vrai

10
cmartin

Je le fais dans RC.5, je définis mes éléments de formulaire dans un modèle.

<form (ngSubmit)="submit(); form.reset()" #form="ngForm">

Passer le formulaire à soumettre ou le regarder avec ViewChild n'a pas fonctionné du tout, cela me suffit pour le moment. 

5
asked_io

Dans les versions les plus récentes (Angular 2.4.8 dans mon cas), c'est simple:

Marque un contrôle comme prédéfini et donc valide à nouveau.

private resetFormControlValidation(control: AbstractControl) {
    control.markAsPristine();
    control.markAsUntouched();
    control.updateValueAndValidity();
}
3
davd

À partir de Réponse de Benny Bottema , j’ai pu réinitialiser le formulaire, y compris les validations, à l’aide de resetForm () dans Angular 6. 

class YourComponent {

   @ViewChild("yourForm")
   yourForm: NgForm;

    onSubmit(): void {
     doYourThing();
     this.yourForm.resetForm();
    }
}
1
Shabir Hamid

si vous utilisez des formulaires gérés par des modèles, i.e ngFormModel, définir à nouveau le groupe de contrôle après la soumission résoudra cette question. Reportez-vous à ceci link

0
Nishanthd

J'ai récemment examiné cette question car rien n'est encore intégré à Angular2 (mai 2016) à ce jour.

Considérant que l'utilisateur ne peut pas entrer 'indéfini' ou 'nul' et que la validation est principalement utilisée pour afficher les erreurs de formulaire à l'utilisateur, il suffit alors de réinitialiser les valeurs de contrôle à Null

myControl.updateValue(null);

Vous devrez ajouter cette condition pour décider d’afficher les erreurs de contrôle dans votre interface utilisateur en ajoutant simplement 

if (myControl.value !== undefined && myControl.value !== null) {
   //then there is reason to display an error
}

(cette vérification car Validators.Required traite le contenu vierge comme valide)

J'espère que cela t'aides.

0
kernowcode

Cela a fonctionné pour moi dans Angular 5 

<form #myForm = "ngForm" (submit)="callMyAPI(); myForm.resetForm()">

Cela réinitialise les valeurs de formulaire et les validations. 

0
Kumar Sidharth