web-dev-qa-db-fra.com

Réinitialisation d'un formulaire dans Angular 2 après soumission

Je suis conscient qu'Angular 2 manque actuellement d'un moyen de réinitialiser facilement un formulaire à un état vierge. En fouillant, j'ai trouvé une solution comme celle ci-dessous qui réinitialise les champs de formulaire.

Il a été suggéré que je dois supprimer le groupe de contrôle et en créer un nouveau pour reconstruire le formulaire en parfait état. J'ai de la difficulté à trouver le meilleur moyen de le faire. Je sais que je dois intégrer la création de formulaire dans une fonction, mais je rencontre des erreurs lorsque je le fais dans le constructeur.

Quel serait le meilleur moyen de reconstruire le groupe de contrôle pour réinitialiser complètement le formulaire?

class App {

    name: Control;
    username: Control;
    email: Control;

    form: ControlGroup;

    constructor(private builder: FormBuilder) {

        this.name = new Control('', Validators.required);
        this.email = new Control('', Validators.required);
        this.username = new Control('', Validators.required);

        this.form = builder.group({
            name: this.name,
            email: this.email,
            username: this.username
        });
    }

    onSubmit(value: any): void {  
        // code that happens when form is submitted
        // then reset the form
        this.reset();
    }

    reset() {
        for (let name in this.form.controls) {
            this.form.controls[name].updateValue('');
            this.form.controls[name].setErrors(null);
        }
    }
}
angularangular2-forms
56
lukemcd

> = RC.6

Soutenez la réinitialisation des formulaires et maintenez un état submitted.

console.log(this.form.submitted);

this.form.reset()

ou

this.form = new FormGroup()...;

mettre à jour

Pour obtenir des mises à jour de certaines choses qui ne sont initialisées que lorsque le formulaire est créé, des mesures supplémentaires sont nécessaires.

<form *ngIf="showForm"

  showForm:boolean = true;
  onSubmit(value:any):void {
    this.showForm = false;
    setTimeout(() => {
    this.reset()
      this.showForm = true;
    });
  }

exemple Plunker

original <= RC.5 Déplacez simplement le code qui crée le formulaire dans une méthode et appelez-le à nouveau une fois que vous avez géré l'envoi:

@Component({
  selector: 'form-component',
  template: `
    <form (ngSubmit)="onSubmit($event)" [ngFormModel]="form">
       <input type="test" ngControl="name">
       <input type="test" ngControl="email">
       <input type="test" ngControl="username">
       <button type="submit">submit</button>
    </form>
    <div>name: {{name.value}}</div>
    <div>email: {{email.value}}</div>
    <div>username: {{username.value}}</div>
`
})
class FormComponent {

  name:Control;
  username:Control;
  email:Control;

  form:ControlGroup;

  constructor(private builder:FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.name = new Control('', Validators.required);
    this.email = new Control('', Validators.required);
    this.username = new Control('', Validators.required);

    this.form = this.builder.group({
      name: this.name,
      email: this.email,
      username: this.username
    });
  }

  onSubmit(value:any):void {
    // code that happens when form is submitted
    // then reset the form
    this.reset();
  }

  reset() {
    this.createForm();
  }
}

exemple Plunker

65
Günter Zöchbauer

Utilisez .resetForm() de NgForm plutôt que de .reset() car il s'agit de la méthode officiellement documentée dans l'API publique de NgForm. (Ref [ 1 ])

<form (ngSubmit)="mySubmitHandler(); myNgForm.resetForm()" #myNgForm="ngForm">

La méthode .resetForm() réinitialisera la NgForm 's FormGroup et affectera son indicateur submit à false (voir [ 2 ]).

Testé dans les versions @angular 2.4.8 et 4.0.0-rc3

25
Somo S.

Pour Angular 2 Final, nous avons maintenant une nouvelle API qui réinitialise proprement le formulaire:

@Component({...})
class App {

    form: FormGroup;
     ...
    reset() {
       this.form.reset();
   }
}

Cette API réinitialise non seulement les valeurs de formulaire, mais redéfinit également les états de champ de formulaire sur ng-pristine et ng-untouched.

25
Angular University

Je ne sais pas si je suis sur le bon chemin, mais je l’ai travaillé sur ng 2.4.8 avec les balises form/submit suivantes:

<form #heroForm="ngForm" (ngSubmit)="add(newHero); heroForm.reset()">
<!-- place your input stuff here -->
<button type="submit" class="btn btn-default" [disabled]="!heroForm.valid">Add hero</button>

Semble faire l'affaire et redéfinit les champs du formulaire sur "vierge".

6
Christof Kälin

Lorsque j’ai parcouru le guide des bases angulaires sur les formulaires et que j’ai frappé la section Réinitialisation des formulaires, j’ai été très surpris lorsque j’ai lu ce qui suit concernant la solution proposée.

Il s'agit d'une solution temporaire pendant que nous attendons une fonctionnalité de réinitialisation de formulaire appropriée.

Personnellement, je n'ai pas testé si la solution de contournement qu'ils fournissaient fonctionnait (je suppose que c'est le cas), mais je pense que ce n'est pas génial et qu'il doit y avoir une meilleure façon de résoudre le problème. 

Selon l’API FormGroup API (marqué comme stable), il existe déjà une méthode de «réinitialisation».

J'ai essayé le suivant. Dans mon fichier template.html j'avais

<form (ngSubmit)="register(); registrationForm.reset();" #registrationForm="ngForm">
    ...
</form>

Notez que dans l'élément de formulaire, j'ai initialisé une variable de référence de modèle 'registrationForm' et l'initialisé avec le ngForm Directive , qui "régit le formulaire dans son ensemble". Cela m'a donné accès aux méthodes et attributs du groupe de formulaires régissant, y compris la méthode reset ().

La liaison de cet appel de méthode à l'événement ngSubmit comme indiqué ci-dessus réinitialise le formulaire (y compris les états vierge, sale, de modèle, etc.) une fois la méthode register () terminée. Pour une démo, c'est correct, mais cela n'est pas très utile pour les applications du monde réel.

Imaginez que la méthode register () effectue un appel au serveur. Nous voulons réinitialiser le formulaire lorsque nous savons que le serveur a répondu que tout allait bien. La mise à jour du code dans ce qui suit s'adresse à ce scénario.

Dans mon fichier template.html:

<form (ngSubmit)="register(registrationForm);" #registrationForm="ngForm">
    ...
</form>

Et dans mon fichier Component.ts:

@Component({
  ...
})
export class RegistrationComponent {
  register(form: FormGroup) {

   ...

   // Somewhere within the asynchronous call resolve function
   form.reset();
  }
}

Passer la référence 'registrationForm' à la méthode nous permettrait d'appeler la méthode de réinitialisation au moment de l'exécution que nous voulons.

J'espère que cela vous aide de quelque manière que ce soit. :)

Note: Cette approche est basée sur Angular 2.0.0-rc.5

6
JeanPaul A.

Si vous appelez uniquement la fonction reset(), les contrôles de formulaire ne seront pas réglés sur l'état initial Les documents Android.io ont une solution à ce problème.

composant.ts 

  active = true; 

  resetForm() {
      this.form.reset();
      this.active = false;
      setTimeout(() => this.active = true, 0);
  }

composant.html 

<form *ngIf="active">
5
aolmez

J'utilise des formes réactives dans 4 angulaire et cette approche fonctionne pour moi:

    this.profileEditForm.reset(this.profileEditForm.value);

voir réinitialiser les drapeaux de formulaire dans le document Fondamentaux

1
mike tannel

S'il vous plaît utiliser le format suivant, cela fonctionne parfaitement pour moi .. j'ai vérifié beaucoup de façons mais cela fonctionne parfaitement .<form (ngSubmit)="mySubmitHandler(); myNgForm.resetForm()" #myNgForm="ngForm"> .... </form>

0
Giri vrc

si quelqu'un veut effacer seulement un contrôle de formulaire particulier, on peut utiliser

formSubmit(){
this.formName.patchValue({
         formControlName:''
          //or if one wants to change formControl to a different value on submit
          formControlName:'form value after submission'     
    });
}
0
Sai Krishna

Dans un cas similaire, j'ai utilisé la réponse de Günter Zöchbauer, qui s'est révélée parfaite pour moi: déplacer la création de formulaire vers une fonction et l'appeler depuis ngOnInit ().

Pour illustration, voici comment je l'ai fait, y compris l'initialisation des champs:

ngOnInit() {
    // initializing the form model here
    this.createForm();
}

createForm() {
    let EMAIL_REGEXP = /^[^@]+@([^@\.]+\.)+[^@\.]+$/i; // here just to add something more, useful too

    this.userForm = new FormGroup({
        name: new FormControl('', [Validators.required, Validators.minLength(3)]),
        city: new FormControl(''),
        email: new FormControl(null, Validators.pattern(EMAIL_REGEXP))
    });

    this.initializeFormValues();
}

initializeFormValues() {
    const people = {
        name: '',
        city: 'Rio de Janeiro',  // Only for demonstration
        email: ''
    };
    (<FormGroup>this.userForm).setValue(people, { onlySelf: true });
}

resetForm() {
    this.createForm();
    this.submitted = false;
}

J'ai ajouté un bouton au formulaire pour une réinitialisation intelligente (avec l'initialisation des champs):

Dans le fichier HTML (ou modèle en ligne): 

<button type="button" [disabled]="userForm.pristine" (click)="resetForm()">Reset</button>

Après avoir chargé le formulaire pour la première fois ou après avoir cliqué sur le bouton de réinitialisation, nous avons l'état suivant:

FORM pristine: true 
FORM valid: false (because I have required a field) 
FORM submitted: false
Name pristine: true
City pristine: true
Email pristine: true

Et toutes les initialisations de champs qu'un simple formulaire.reset () ne fait pas pour nous! :-)

0
Julio Ventura