web-dev-qa-db-fra.com

Comment effacer le formulaire après l'avoir soumis dans Angular 2?

J'ai quelques composants simples angular 2 avec template. Comment effacer le formulaire et tous les champs après la soumission?. Je ne peux pas recharger la page. Une fois les données définies avec le champ date.setValue('') reste _ 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

<div class="card card-block">
    <h3 class="card-title">Loading form</h3>

    <form (ngSubmit)="onSubmit(form.value)" [ngFormModel]="form">
        <fieldset class="form-group" [class.has-danger]="!date.valid && date.touched">
            <label class="form-control-label" for="dateInput">Date</label>
            <input type="text" class="form-control form-control-danger form-control-success" id="dateInput"
                   min="0" placeholder="Enter loading date"
                   [ngFormControl]="form.controls['date']">
        </fieldset>
        <fieldset class="form-group" [class.has-danger]="!capacity.valid && capacity.touched">
            <label class="form-control-label" for="capacityInput">Capacity</label>
            <input type="number" class="form-control form-control-danger form-control-success" id="capacityInput"
                   placeholder="Enter capacity"
                   [ngFormControl]="form.controls['capacity']">
        </fieldset>
        <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Submit
        </button>
    </form>
</div>
angularangular2-forms
57
masel.popowo

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 possible de 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 forms reset. 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) {
    (<Control>form.controls[name]).updateValue('');
    /*(<FormControl>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

98
Günter Zöchbauer

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

25
ebhh2001

Pour réinitialiser votre formulaire après l'avoir soumis, vous pouvez simplement appeler this.form.reset(). En appelant reset(), il va:

  1. Marquez le contrôle et les contrôles enfants comme comme neufs .
  2. Marquez le contrôle et les contrôles enfants comme intacts .
  3. Définissez la valeur des contrôles enfant et contrôle sur , valeur personnalisée ou null .
  4. Mise à jour valeur/validité/erreurs des parties concernées.

Veuillez trouver ceci demande de tirage pour une réponse détaillée. Pour votre information, ce RP a déjà été fusionné avec la version 2.0.0.

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

13
JayKan
import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';
@Component({
    selector: 'example-app',
    template: '<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
        <input name="first" ngModel required #first="ngModel">
        <input name="last" ngModel>
        <button>Submit</button>
    </form>
    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>',
})
export class SimpleFormComp {
    onSubmit(f: NgForm) {

        // some stuff

        f.resetForm();
    }
}
8
Rahul Tiwari

Pour angular version 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 null dans votre référence d'objet.

référence lien , recherchez "réinitialiser les drapeaux de formulaire".

6
Lucas Selliach

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

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

clearForm() {

this.addContactForm.reset({
      'first_name': '',
      'last_name': '',
      'mobile': '',
      'address': '',
      'city': '',
      'state': '',
      'country': '',
       'Zip': ''
     });
}
6
mkumar0304

Il y a une nouvelle discussion à ce sujet ( https://github.com/angular/angular/issues/49 ). Jusqu’à présent, il n’existe que quelques hacks permettant d’effacer le formulaire, comme de recréer le formulaire complet après l’envoi: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/

3
wawka

J'ai trouvé une autre solution. C'est un peu hacky mais il est largement disponible dans le monde angular2.

Puisque la directive * ngIf supprime le formulaire et le recrée, vous pouvez simplement ajouter un * ngIf au formulaire et le lier à une sorte de variable formSuccessfullySent. => Ceci recréera le formulaire et réinitialisera donc les états de contrôle des entrées.

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. :)

1
Benjamin Jesuiter

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', '');
}
<button type="button" class="btn btn-default" (click)="heroForm.resetForm(newHero())">New Hero</button>
0
adrhc

Le code ci-dessous fonctionne pour moi dans Angular 4

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class RegisterComponent implements OnInit {
 registerForm: FormGroup; 

 constructor(private formBuilder: FormBuilder) { }   

 ngOnInit() {
    this.registerForm = this.formBuilder.group({
      empname: [''],
      empemail: ['']
    });
 }

 onRegister(){
    //sending data to server using http request
    this.registerForm.reset()
 }

}
0
Thavaprakash Swaminathan

Voici comment je le fais dans Angular 7.3

// you can put this method in a module and reuse it as needed
resetForm(form: FormGroup) {

    form.reset();

    Object.keys(form.controls).forEach(key => {
      form.get(key).setErrors(null) ;
    });
}

Il n'y avait pas besoin d'appeler form.clearValidators()

0
Mauricio Gracia Gutierrez