Resetting template driven forms in angular 2 (models and validations both)

Question

How do we reset the controls with validation states of Template driven forms in angular 2? I know that controls can be reset by setting model values to which they are bound to. But what about the validation states(pristine, dirty etc..)?

I tried something like this:

<form (ngSubmit)="onSubmit(playlistForm)" #playlistForm="ngForm">
// Some code here...
</form>

And in controller,

onSubmit(playlistForm: any) {
// ...
  playlistForm.form.reset();
}

But in above seems to actually redirect to the '' And I get error below:

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''

So how do I do what I want?

score 15 · Answer 1 · answered Oct 15 '16 at 14:54

15

Both of these worked for me:

playlistForm.reset();
playlistForm.resetForm(); // I think this is the one to use

Angular docs have resetForm() only https://angular.io/docs/ts/latest/api/forms/index/NgForm-directive.html

answered Oct 15 '16 at 14:54

@StepanZarubin I'm using `angular 2.4.0` none of them works form me – Nikhil Radadiya Jul 19 '17 at 06:16
reset() works for me in `Angular 6.1.0` from a FromControl class – wctiger Aug 30 '18 at 19:19
reset() throws validation error after submit. What should i do? – A Coder Oct 03 '19 at 13:15

score 4 · Answer 2 · answered Jul 05 '17 at 09:00

4

<form (ngSubmit)="onSubmit(playlistForm)" #playlistForm="ngForm">
// Some code here...
</form>


onSubmit(playlistForm: ngForm) {
// ...
  playlistForm.form.reset();
}

answered Jul 05 '17 at 09:00

Suraj Khanal

498
8
26

typo >> onSubmit(playlistForm: NgForm) { – matel Jul 04 '20 at 18:50

score 4 · Answer 3 · answered Sep 05 '17 at 11:34

4

This worked for me:

<form (ngSubmit)="onSubmit(playlistForm);playlistForm.reset()" #playlistForm="ngForm">
    // Some code here...
</form>

answered Sep 05 '17 at 11:34

Adrita Sharma

21,581
10
69
79

`reset()` throws validation error after submit. What should i do? – A Coder Oct 03 '19 at 13:16

score 3 · Answer 4 · answered Nov 26 '19 at 08:26

3

form.resetForm();

This also resets the validation states of the form, unlike form.reset(). Works with template-driven and reactive approaches.

answered Nov 26 '19 at 08:26

Samuel Mutemi

358
3
7

This doesn't seem to be a function anymore. – DigiBanks99 Apr 15 '21 at 13:41
It is. I was using `@angular/forms: 8.0.0` when this answer was posted. I'm using `@angular/forms: 11.2.11` and `form.resetForm()` is currently available as a method in the class NgForm in the stated versions and the versions in between as far as I can tell. – Samuel Mutemi May 18 '21 at 08:04

score 0 · Answer 5 · answered Feb 18 '21 at 08:32

0

I used native element reference in .ts and called form later cleared the form data once submitted using reset method

answered Feb 18 '21 at 08:32

user8855928

1
1

score -1 · Answer 6 · answered Dec 24 '18 at 11:28

-1

This worked for me onClear() is additional callback I needed for some additional tasks.

<button type="reset" (click)="onClear()">Clear</button>

answered Dec 24 '18 at 11:28

Rvk

1
1

This does not help OP. He is asking for clearing form when user click submit. – Maihan Nijat Jan 17 '19 at 14:51

Resetting template driven forms in angular 2 (models and validations both)

6 Answers6

Linked