How to clear form after submit in Angular 2?

Question

I have some simple angular 2 component with template. How to clear form and all fields after submit?. I can't reload page. After set data with date.setValue('') field is 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> 

Answer 1

See also https://angular.io/docs/ts/latest/guide/reactive-forms.html (section "reset the form flags")

>=RC.6

In RC.6 it should be supported to update the form model. Creating a new form group and assigning to myForm

[formGroup]="myForm" 

will also be supported (https://github.com/angular/angular/pull/11051#issuecomment-243483654)

>=RC.5

form.reset(); 

In the new forms module (>= RC.5) NgForm has a reset() method and also supports a forms reset event. https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

<=RC.3

This will work:

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

See also

• 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

Answer 2

As of Angular2 RC5, myFormGroup.reset() seems to do the trick.