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

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>

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

• https://github.com/angular/angular/issues/6196
• https://github.com/angular/angular/issues/6169
• https://github.com/angular/angular/issues/4933
• https://github.com/angular/angular/issues/4914
• https://github.com/angular/angular/issues/6371

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

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.

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': ''
     });
}

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

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

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.

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"

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 l'avoir soumis: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/

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

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>

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

}

this.myForm.reset ();

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

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 .

resetForm(){
    ObjectName = {};
}