Comment effacer le formulaire après la soumission dans Angular 2?

J’ai un simple composant angular 2 avec modèle. Comment effacer le formulaire et tous les champs après envoi? Je ne peux pas recharger la page. Après avoir défini les données avec date.setValue('') champ est touched .

 import {Component} from 'angular2/core'; import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, Control} from 'angular2/common'; @Component({ selector: 'loading-form', templateUrl: 'app/loadings/loading-form.component.html', directives: [FORM_DIRECTIVES] }) export class LoadingFormComponent { private form:ControlGroup; private date:Control; private capacity:Control; constructor(private _loadingsService:LoadingsService, fb:FormBuilder) { this.date = new Control('', Validators.required); this.capacity = new Control('', Validators.required); this.form = fb.group({ 'date': this.date, 'capacity': this.capacity }); } onSubmit(value:any):void { //send some data to backend } } 

loading-form.component.html

 

Loading form

Voir aussi https://angular.io/docs/ts/latest/guide/reactive-forms.html (section “réinitialiser les indicateurs de formulaire”)

> = RC.6

Dans RC.6, il devrait être supporté pour mettre à jour le modèle de formulaire. Création d’un nouveau groupe de formulaires et affectation à myForm

 [formGroup]="myForm" 

sera également pris en charge ( https://github.com/angular/angular/pull/11051#issuecomment-243483654 )

> = RC.5

 form.reset(); 

Dans le nouveau module de formulaires (> = RC.5), NgForm a une méthode reset() et prend également en charge un événement de reset formulaires. https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

<= RC.3

Cela fonctionnera:

 onSubmit(value:any):void { //send some data to backend for(var name in form.controls) { (form.controls[name]).updateValue(''); /*(form.controls[name]).updateValue('');*/ this should work in RC4 if `Control` is not working, working same in my case form.controls[name].setErrors(null); } } 

Voir également

A partir de Angular2 RC5, myFormGroup.reset() semble faire l’affaire.

Pour réinitialiser votre formulaire après la soumission, vous pouvez simplement invoquer this.form.reset() . En appelant reset() il va:

  1. Marquez le contrôle et les contrôles enfants comme étant vierges .
  2. Marquer le contrôle et les contrôles enfants comme étant intacts .
  3. Définissez la valeur du contrôle et des contrôles enfants sur la valeur personnalisée ou null .
  4. Mettre à jour la valeur / validité / erreur des parties concernées.

Veuillez trouver cette demande de tirage pour une réponse détaillée. Pour info, cette PR a déjà été fusionnée à 2.0.0.

J’espère que cela peut être utile et laissez-moi savoir si vous avez d’autres questions concernant Angular2 Forms.

 import {Component} from '@angular/core'; import {NgForm} from '@angular/forms'; @Component({ selector: 'example-app', template: '

First name value: {{ first.value }}

First name valid: {{ first.valid }}

Form value: {{ f.value | json }}

Form valid: {{ f.valid }}

', }) export class SimpleFormComp { onSubmit(f: NgForm) { // some stuff f.resetForm(); } }

Il y a une nouvelle discussion à ce sujet ( https://github.com/angular/angular/issues/4933 ). Jusqu’à présent, il n’y a que quelques hacks qui permettent d’effacer le formulaire, comme recréer le formulaire entier après la soumission: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/

Pour la version angular 4, vous pouvez utiliser ceci:

 this.heroForm.reset(); 

Mais, vous pourriez avoir besoin d’une valeur initiale comme:

 ngOnChanges() { this.heroForm.reset({ name: this.hero.name, //Or '' to empty initial value. address: this.hero.addresses[0] || new Address() }); } 

Il est important de résoudre le problème nul dans votre référence d’object.

lien de référence, Rechercher “réinitialiser les indicateurs de formulaire”.

Faire un appel clearForm(); dans votre fichier .ts

Essayez comme ci-dessous un extrait de code pour effacer vos données de formulaire.

 clearForm() { this.addContactForm.reset({ 'first_name': '', 'last_name': '', 'mobile': '', 'address': '', 'city': '', 'state': '', 'country': '', 'zip': '' }); } 

J’ai trouvé une autre solution. C’est un peu pirate mais c’est largement disponible dans le monde angular2.

Étant donné que la directive * ngIf supprime le formulaire et le recrée, il suffit d’append un * ngIf au formulaire et de le lier à une variable formSuccessfullySent . => Ceci recréera le formulaire et réinitialisera donc les états du contrôle d’entrée.

Bien sûr, vous devez également effacer les variables du modèle. J’ai trouvé pratique d’avoir une classe de modèle spécifique pour mes champs de formulaire. De cette façon, je peux réinitialiser tous les champs aussi simplement que créer une nouvelle instance de cette classe de modèle. 🙂

Hm, maintenant (23 janvier 2017 avec angular 2.4.3) Je l’ai fait fonctionner comme ceci:

 newHero() { return this.model = new Hero(42, 'APPLIED VALUE', ''); }  
 resetForm(){ ObjectName = {}; }