Come cancellare il modulo dopo l'invio in Angular 2?

Ho qualche semplice componente angolare 2 con modello. Come cancellare il modulo e tutti i campi dopo l'invio ?. Non riesco a ricaricare la pagina. Dopo aver impostato i dati con il date.setValue('')campo è stil 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>

Vedi anche https://angular.io/docs/ts/latest/guide/reactive-forms.html (sezione "resettare i flag del modulo")

> = RC.6

In RC.6 dovrebbe essere supportato per aggiornare il modello del modulo. Creazione di un nuovo gruppo di moduli e assegnazione amyForm

[formGroup]="myForm"

sarà anche supportato ( https://github.com/angular/angular/pull/11051#issuecomment-243483654 )

> = RC.5

form.reset();

Nel nuovo modulo form (> = RC.5) NgFormha un reset()metodo e supporta anche un resetevento form . https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

<= RC.3

Questo funzionerà:

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

Guarda anche

• 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

A partire da Angular2 RC5, myFormGroup.reset()sembra fare il trucco.

Per ripristinare il modulo dopo l'invio, puoi semplicemente invocare this.form.reset(). Chiamandolo reset():

1. Contrassegna il controllo ei controlli figlio come incontaminati .
2. Contrassegnare il controllo e i controlli figlio come intatti .
3. Imposta il valore del controllo e dei controlli figlio su valore personalizzato o null .
4. Aggiorna valore / validità / errori delle parti interessate.

Si prega di trovare questa richiesta di pull per una risposta dettagliata. Cordiali saluti, questo PR è già stato unito alla 2.0.0.

Spero che questo possa essere utile e fammi sapere se hai altre domande in merito a Angular2 Forms.

Effettuare una chiamata clearForm(); nel tuo file .ts

Prova come sotto lo snippet di codice di esempio per cancellare i dati del modulo.

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

Ecco come lo faccio in 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) ;
    });
}

Non c'era bisogno di chiamare form.clearValidators()

Ecco come lo faccio Angular 8:

Ottieni un riferimento locale del tuo modulo:

<form name="myForm" #myForm="ngForm"></form>

@ViewChild('myForm', {static: false}) myForm: NgForm;

E ogni volta che devi reimpostare il modulo, chiama il resetFormmetodo:

this.myForm.resetForm();

Sarà necessario FormsModuleda @angular/formsper farlo funzionare. Assicurati di aggiungerlo alle importazioni del tuo modulo.

Per la versione angolare 4, puoi usare questo:

this.heroForm.reset();

Ma potresti aver bisogno di un valore iniziale come:

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

È importante risolvere il problema nullo nel riferimento all'oggetto.

link di riferimento , Cerca "reimposta i flag del modulo".

C'è una nuova discussione su questo ( https://github.com/angular/angular/issues/4933 ). Finora ci sono solo alcuni hack che consentono di cancellare il modulo, come ricreare l'intero modulo dopo l'invio: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/

Ho trovato un'altra soluzione. È un po 'hacky ma è ampiamente disponibile nel mondo angular2.

Poiché la direttiva * ngIf rimuove il form e lo ricrea, si può semplicemente aggiungere un * ngIf al form e associarlo a una sorta di formSuccessfullySentvariabile. => Questo ricreerà il modulo e quindi resetterà gli stati di controllo degli ingressi.

Ovviamente, devi cancellare anche le variabili del modello. Ho trovato conveniente avere una classe modello specifica per i miei campi modulo. In questo modo posso ripristinare tutti i campi in modo semplice come creare una nuova istanza di questa classe modello. :)

Hm, ora (23 gennaio 2017 con angolare 2.4.3) l'ho fatto funzionare in questo modo:

newHero() {
    return this.model = new Hero(42, 'APPLIED VALUE', '');
}
<button type="button" class="btn btn-default" (click)="heroForm.resetForm(newHero())">New Hero</button>

Il codice seguente funziona per me in 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 ();

Questo è tutto abbastanza ... Puoi ottenere l'output desiderato

Per ripristinare il modulo completo al momento dell'invio, puoi utilizzare reset () in Angular. L'esempio seguente è implementato in Angular 8. Di seguito è riportato un modulo di iscrizione in cui si prende l'e-mail come input.

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

Fare riferimento al documento ufficiale: https://angular.io/guide/forms#show-and-hide-validation-error-messages .

resetForm(){
    ObjectName = {};
}