Como limpar o formulário após o envio no Angular 2?

Eu tenho algum componente angular 2 simples com modelo. Como limpar o formulário e todos os campos após o envio ?. Não consigo recarregar a página. Depois de definir os dados com o date.setValue('')campo ainda 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>

Consulte também https://angular.io/docs/ts/latest/guide/reactive-forms.html (seção "redefinir os sinalizadores de formulário")

> = RC.6

No RC.6, deve haver suporte para atualizar o modelo de formulário. Criar um novo grupo de formulários e atribuir amyForm

[formGroup]="myForm"

também terá suporte ( https://github.com/angular/angular/pull/11051#issuecomment-243483654 )

> = RC.5

form.reset();

No novo módulo de formulários (> = RC.5) NgFormtem um reset()método e também suporta um resetevento de formulários . https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

<= RC.3

Isso vai funcionar:

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

Veja também

• 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 partir do Angular2 RC5, myFormGroup.reset()parece funcionar.

Para redefinir seu formulário após o envio, você pode simplesmente invocar this.form.reset(). Ao ligar reset():

1. Marque o controle e os controles filhos como originais .
2. Marque o controle e os controles filho como intocados .
3. Defina o valor do controle e dos controles filhos como valor personalizado ou nulo .
4. Atualize o valor / validade / erros das partes afetadas.

Encontre esta solicitação de pull para uma resposta detalhada. Para sua informação, este PR já foi mesclado com o 2.0.0.

Esperançosamente, isso pode ser útil e me avise se você tiver outras perguntas em relação ao Formulários Angular2.

Faça uma chamada clearForm();em seu arquivo .ts

Tente como o exemplo de trecho de código abaixo para limpar os dados do formulário.

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

Aqui está como faço isso no 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) ;
    });
}

Não havia necessidade de ligar form.clearValidators()

É assim que faço Angular 8:

Obtenha uma referência local do seu formulário:

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

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

E sempre que você precisar redefinir o formulário, chame o resetFormmétodo:

this.myForm.resetForm();

Você precisará FormsModulede @angular/formspara que funcione. Certifique-se de adicioná-lo às suas importações de módulo.

Para o angular versão 4, você pode usar isto:

this.heroForm.reset();

Mas, você pode precisar de um valor inicial como:

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

É importante resolver o problema de nulos em sua referência de objeto.

link de referência , Pesquise "redefinir os sinalizadores de formulário".

Há uma nova discussão sobre isso ( https://github.com/angular/angular/issues/4933 ). Até agora, existem apenas alguns hacks que permitem limpar o formulário, como recriar todo o formulário após o envio: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/

Encontrei outra solução. É um pouco hacky, mas está amplamente disponível no mundo angular2.

Visto que a diretiva * ngIf remove o formulário e o recria, pode-se simplesmente adicionar um * ngIf ao formulário e ligá-lo a algum tipo de formSuccessfullySentvariável. => Isso irá recriar o formulário e, portanto, redefinir os status de controle de entrada.

Claro, você também deve limpar as variáveis ​​do modelo. Achei conveniente ter uma classe de modelo específica para meus campos de formulário. Desta forma, posso redefinir todos os campos tão simples quanto criar uma nova instância desta classe de modelo. :)

Hm, agora (23 de janeiro de 2017 com angular 2.4.3) fiz funcionar assim:

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

O código abaixo funciona para mim no 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 ();

Isso é tudo o suficiente ... Você pode obter a saída desejada

Para redefinir o formulário completo após o envio, você pode usar reset () no Angular. O exemplo a seguir é implementado em Angular 8. Abaixo está um formulário de inscrição, no qual estamos recebendo e-mail como entrada.

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

Consulte o documento oficial: https://angular.io/guide/forms#show-and-hide-validation-error-messages .

resetForm(){
    ObjectName = {};
}