Comment effacer le formulaire après avoir été soumis dans Angular 2?


87

J'ai un simple composant angulaire 2 avec un modèle. Comment effacer le formulaire et tous les champs après l'envoi?. Je ne peux pas recharger la page. Après avoir défini les données avec le date.setValue('')champ est toujours 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>

Réponses:


135

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 pris en charge 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) NgForma une reset()méthode et prend également en charge un resetévénement de 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) {
    (<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


2
@ masel.popowo Oui, si vous voulez pristine, ..., reconstruire le formulaire est actuellement la seule option.
Günter Zöchbauer

@ günter-zöchbauer comment reconstruire le formulaire?
SimonHawesome

2
Je ne l'ai pas encore essayé moi-même, mais je suppose que vous venez de supprimer le groupe de contrôle et d'en créer un nouveau. Déplacez le code vers une fonction afin de pouvoir l'appeler à plusieurs reprises si nécessaire.
Günter Zöchbauer

+1 pour setErrors (). Au fait, je documente ici une erreur que j'ai commise au cas où quelqu'un d'autre ferait quelque chose de similaire: au cas où vous utilisez un espace réservé, par exemple 'foo', n'appelez pas control.updateValue ('foo') mais appelez à la place control.setValue (null)
Mike Argyriou

Je ne connais pas de setValue()méthode de contrôle. Only updateValue() github.com/angular/angular/blob/master/modules/angular2/src/…
Günter Zöchbauer

32

À partir d'Angular2 RC5, myFormGroup.reset()semble faire l'affaire.


cela fonctionne en angulaire 4, utilisé pour réinitialiser les validations de formulaire
Grim

13

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

  1. Marquez le contrôle et les contrôles enfants comme parfaits .
  2. Marquez le contrôle et les contrôles enfants comme non modifiés .
  3. Définissez la valeur du contrôle et des contrôles enfants sur une valeur personnalisée ou sur null .
  4. Mettre à jour la valeur / la validité / les erreurs des parties concernées.

Veuillez trouver cette pull request pour une réponse détaillée. Pour info, ce PR a déjà été fusionné avec 2.0.0.

J'espère que cela pourra être utile et faites-moi savoir si vous avez d'autres questions concernant les formulaires Angular2.


1
si j'utilise la réinitialisation, les validations ne sont pas appliquées. Comment puis-je faire fonctionner les deux?
Nisha

10

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

Essayez comme ci-dessous un exemple d'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': ''
     });
}

9
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();
    }
}

@ Cela fonctionne très bien lorsque nous devons effacer tous les champs. Mais comment pouvons-nous mettre en œuvre la même chose pour effacer uniquement certains champs?
Akhilesh Pothuri

8

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()


2
C'est la meilleure solution (et qui ne fonctionne que pour moi) pour effacer le formulaire construit avec FormBuilder qui a des contrôles avec des validateurs.
mmied

7

Voici comment je le fais Angular 8:

Obtenez une référence locale de votre formulaire:

<form name="myForm" #myForm="ngForm"></form>
@ViewChild('myForm', {static: false}) myForm: NgForm;

Et chaque fois que vous avez besoin de réinitialiser le formulaire, appelez la resetFormméthode:

this.myForm.resetForm();

Vous aurez besoin FormsModulede @angular/formspour que cela fonctionne. Assurez-vous de l'ajouter à vos importations de modules.


1
@ViewChilddans Angular 8 nécessite 2 arguments. @ViewChild('myForm', {static: false}) myForm: NgForm;
Tanzeel

6

Pour la version angulaire 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'objet.

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


Merci, ça marche pour moi. C'est ce que je veux.
Dhaval Mistry


1

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

Puisque la directive * ngIf supprime le formulaire et le recrée, on peut simplement ajouter un * ngIf au formulaire et le lier à une sorte de formSuccessfullySentvariable. => Cela recréera le formulaire et réinitialisera donc les états de 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 simplement en créant une nouvelle instance de cette classe de modèle. :)


Ajout: J'utilise AngularDart, qui n'a pas encore une telle méthode de réinitialisation. Ou du moins je ne l'ai pas découvert pour le moment. : D
Benjamin Jesuiter

Avec RC.6, il suffit de réinitialiser le modèle de formulaires. Si vous déplacez la création du modèle de formulaires vers une méthode, l'appel de cette méthode réinitialisera le formulaire.
Günter Zöchbauer

@ GünterZöchbauer Oh super! J'ai hâte d'avoir cette fonctionnalité dans Angular2 pour Dart aussi! :) Parce que mon approche est un problème: j'ai une liste de tous les éléments d'entrée dans mon formulaire. Je les reçois via dart-native querySelectorAllin ngAfterViewInit. J'utilise cette liste pour concentrer le prochain élément d'entrée sur keydown.enter, au lieu de soumettre le formulaire. Cette liste est interrompue lors de l'utilisation de ngIf pour réinitialiser le formulaire. :(
Benjamin Jesuiter

OK, j'ai résolu le problème. Je peux interroger à nouveau les instances InputElement lorsque je réinitialise mon modèle de formulaire.
Benjamin Jesuiter

0

Hm, maintenant (23 janvier 2017 avec angulaire 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

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

this.myForm.reset ();

Tout cela suffit ... Vous pouvez obtenir la sortie souhaitée


1
Ajoutez plus d'explications sur la façon dont cette ligne de code résout le problème
Sfili_81

0

Pour réinitialiser le formulaire complet lors de la soumission, vous pouvez utiliser reset () dans Angular. L'exemple ci-dessous est implémenté dans Angular 8. Vous trouverez ci-dessous un formulaire d'inscription où nous prenons le courrier électronique comme entrée.

<form class="form" id="subscribe-form" data-response-message-animation="slide-in-left" #subscribeForm="ngForm"
(ngSubmit)="subscribe(subscribeForm.value); subscribeForm.reset()">
<div class="input-group">
   <input type="email" name="email" id="sub_email" class="form-control rounded-circle-left"
      placeholder="Enter your email" required ngModel #email="ngModel" email>
   <div class="input-group-append">
      <button class="btn btn-rounded btn-dark" type="submit" id="register"
         [disabled]="!subscribeForm.valid">Register</button>
   </div>
</div>
</form>

Reportez-vous à la documentation officielle: https://angular.io/guide/forms#show-and-hide-validation-error-messages .


-3
resetForm(){
    ObjectName = {};
}

Bien que ce code puisse répondre à la question, vous devez ajouter une explication indiquant pourquoi / comment il résout le problème.
BDL

il ne remet pas les classes 'touched', 'pristine', etc ... à leurs valeurs d'origine.
Pac0

@Shivendra Cela peut fonctionner particulièrement pour votre problème, mais ce n'est pas générique. Vous faites votre objectvide et non le form.
Tanzeel du
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.