Resetting form and set default value Angular 2

Question

I'm working on a simple Angular 2 app and am having trouble resetting an ngForm but keeping a default value:

Expected behavior is when clicking "Reset", the input box will reset to it's default value ("Default" in this case) as well as all of the angular specific classes going back to the default (i.e. ng-untouched, ng-pristine, etc)

What I am seeing is the default value is being cleared as well, even when I explicitly set it after the form is reset

Code snippet below:

HTML:

<form (ngSubmit)="onTrainSearchClick()" novalidate #trainForm="ngForm">
  <input type="text" [(ngModel)]="id" name="someId"/>
  <button type="button" (click)="reset(trainForm)">Reset</button>
  <button type="submit">Search</button>
</form>

TypeScript (left out the imports and @Component):

export class TrainSearchTestComponent implements OnInit {

  id: string = 'DEFUALT';

  constructor() { }
  ngOnInit() { }
  onTrainSearchClick(){ }

  reset(form: NgForm){
    form.resetForm();
    this.id = 'DEFUALT';
  }
}

smnbbrv · Accepted Answer · 2017-11-20T13:56:13.883

56

Use form.reset:

form.reset({ id: this.id });

Original answer (valid for angular@2)

You can pass a value to resetForm which will be used as a default value for the form:

form.resetForm({ id: this.id });

(of course if your form is a FormGroup and it has a control with the name id which should have a default value)

edited Nov 20 '17 at 13:56

answered Feb 08 '17 at 19:21

smnbbrv

23,502
9
78
109

this worked for me but do you know why the line "this.id = 'Default'" doesn't work? thanks – Tony Scialo Feb 08 '17 at 19:58
1

because you just set up a string id to the value default. Problem is that you don't set your FormControl which holds your id to this value. – smnbbrv Feb 08 '17 at 21:25
2

I think the method is now just reset: form.reset() – Dave Oct 23 '17 at 16:12
Works like a charm – MELWIN VINCENT Aug 14 '18 at 14:06

Resetting form and set default value Angular 2

1 Answers1