How to reset form validation on submission of the form in ANGULAR 2

Question

I have to reset my form along with validation. is there any method to reset the state of form from ng-dirty to ng-pristine.

Possible duplicate of [Resetting a form in Angular 2 after submit](http://stackoverflow.com/questions/36655922/resetting-a-form-in-angular-2-after-submit) — Angular University, Aug 18 '16 at 17:21
This is the solution for now https://stackoverflow.com/a/48217303/9059790 — Dan Patil, Feb 25 '20 at 05:34
This is the solution for above angular 10. https://stackoverflow.com/questions/49788215/angular-material-reseting-reactiveform-shows-validation-error/71108302#71108302 — chandoo, Nov 15 '22 at 06:54

Benny Bottema · Answer 1 · 2018-01-20T18:51:18.710

72

Here's how it currently works with Angular 4.1.0 - 5.1.3:

class YourComponent {
    @ViewChild("yourForm")
    yourForm: NgForm;


    onSubmit(): void {
        doYourThing();

        // yourForm.reset(), yourForm.resetForm() don't work, but this does:
        this.yourForm.form.markAsPristine();
        this.yourForm.form.markAsUntouched();
        this.yourForm.form.updateValueAndValidity();
    }
}

edited Jan 20 '18 at 18:51

answered May 26 '17 at 09:55

Benny Bottema

11,111
10
71
96

2

If you use Angular Material Inputs, you can make them valid again by using `yourForm.resetForm('')`. But you need the other code also. – ravo10 Oct 14 '18 at 22:12
15

Unfortunately this doesn't seem to work for Angular 6.1.0, the input is marked as invalid. – Stijn Van Bael Oct 22 '18 at 14:23
In angular 6 define variable submit:boolean and give Initial value false. Then submit form submit value assign true. Then inside response submit value assign false and reset the form – Dilshan Dilip Aug 07 '20 at 15:51
this.supplerService.AddMetrics(add).subscribe( (myMetrics)=>{ console.log(myMetrics); this.resetForm(); this.viewMetrics(); // this.metricsform.controls.metricsName.setErrors(null); }, (err)=>{ console.log(err); } ); – Dilshan Dilip Aug 07 '20 at 15:52
resetForm(){ this.submitted = false; this.metricsform.reset(); } – Dilshan Dilip Aug 07 '20 at 16:03
1

This works in angular 13 – Mario May 16 '22 at 20:31

score 22 · Answer 2 · answered Jul 14 '17 at 01:41

from.resetForm()

I've tried pretty much everything, and the only thing I found that actually resets form.submitted to false is the following:

In your template, send your form into the submit function:

<form name="form" class="form-horizontal" (ngSubmit)="f.form.valid && submit(f)" #f="ngForm" novalidate>

In your component.ts file, have the following:

// import NgForm
import { NgForm } from '@angular/forms';

// get the passed in variable from the html file
submit(myForm: NgForm): void {

    console.log(myForm.form.status, myForm.form.dirty, myForm.form.pristine, myForm.form.untouched, myForm.submitted, myForm.dirty, myForm.pristine, myForm.untouched);

    // This is the key!
    myForm.resetForm();

    console.log(myForm.form.status, myForm.form.dirty, myForm.form.pristine, myForm.form.untouched, myForm.submitted, myForm.dirty, myForm.pristine, myForm.untouched);


}

The console.log values output the following - notice it resets all values.

VALID true false false true true false false

INVALID false true true false false true true

Works well but there is one problem. Status go to INVALID and stay so.It does not change to VALID with new values. A kind of bug maybe i don't know. I need to refresh page for new submit. — LacOniC, Apr 25 '21 at 18:34

Daniel Danielecki · Answer 3 · 2020-03-05T15:08:06.447

app.component.html

The #formDirective="ngForm" and passing the formDirective to the onSubmit method is crucial for resetting error styles such as mat-error. Check #4190 to follow this bug and in-depth explanation why it's needed and how it works under the hood.

<form [formGroup]="contactForm" (ngSubmit)="onSubmit(contactForm.value, formDirective)" #formDirective="ngForm"> 
  <!-- Your input elements... -->
  <button [disabled]="!contactForm.valid">Submit</button>
</form>

app.component.ts

Remember about the FormGroupDirective which you need to import from @angular/forms (Angular/Material 9). To make the form empty call this.contactForm.reset(); and the form will be invalid, it's fine. However, you also need to reset the undesired validators styles, and this is a different method, i.e. formDirective.resetForm();.

Notice difference between formDirective and formData with its different built-in methods.

import { FormGroupDirective } from '@angular/forms';

public contactForm: FormGroup = this.formBuilder.group({
  // Your input elements...
});

public onSubmit(
  formData: FormGroup,
  formDirective: FormGroupDirective
): void {
  this.contactForm.reset(); // Reset form data
  formDirective.resetForm(); // Reset the ugly validators
}

For future readers who struggled like me, this is the only working solution for Angular 9. — Gangadhar Jannu, Jul 02 '20 at 22:36

score 8 · Answer 4 · answered Aug 04 '20 at 05:03

8

<form #formDirective="ngForm" (ngSubmit)="submitForm(formDirective)">

And in your component class, call formDirective.resetForm():

private submitForm(formDirective): void {
    formDirective.resetForm();
    this.myForm.reset();
}

answered Aug 04 '20 at 05:03

suhailvs

20,182
14
100
98

Jason Foglia · Answer 5 · 2019-03-11T19:39:00.240

I appreciate everyones answers here. They pointed me in the right direction.

Angular 6 with Angular Material

<form #myForm="ngForm" [formGroup]="formGroup" (ngSubmit)="submit()">

then

@ViewChild('myForm') myForm: NgForm;
formGroup = new FormGroup({...});
submit() {
  if (this.formGroup.pristine ||
  this.formGroup.untouched ||
  !this.formGroup.valid
) {
    return;
  }

  .... do with form data

  this.formGroup.reset();
  this.myForm.resetForm();
}

score 6 · Accepted Answer · answered Jan 05 '16 at 09:46

6

There doesn't seem to be support for that yet. A workaround I have seen is to recreate the form after submit which is obviously cumbersome and ugly.

See also

answered Jan 05 '16 at 09:46

Günter Zöchbauer

623,577
216
2,003
1,567

4

This is the solution for now https://stackoverflow.com/a/48217303/9059790 – Dan Patil Feb 25 '20 at 05:33

score 6 · Answer 7 · answered Aug 13 '16 at 07:53

6

I'm doing this in RC.5, I define my form elements in a template.

<form (ngSubmit)="submit(); form.reset()" #form="ngForm">

Passing the form to submit or watching it with ViewChild didn't work at all, this is good enough for me at the moment.

answered Aug 13 '16 at 07:53

Will Bowman

407
9
20

I used this. I am on angular2. Yes it reset the form. But it affects the validation. I can submit the form without anything in the fields. Eventhough the isValid property is false in that case, form does not show the alert messages. The reason should be the form getting reset. – vigamage May 18 '17 at 06:26
1

It doesn't clear the pristines, errors hints and the Validator associated to the #form. – Maxime Flament Jun 05 '18 at 11:43

score 6 · Answer 8 · answered Mar 08 '17 at 09:20

6

In more current versions (Angular 2.4.8 in my case) it's easy:

Marks a control as prestine and therefore valid again.

private resetFormControlValidation(control: AbstractControl) {
    control.markAsPristine();
    control.markAsUntouched();
    control.updateValueAndValidity();
}

answered Mar 08 '17 at 09:20

davd

79
1
3

In my case the following has been enough (Angular 15): control.updateValueAndValidity(); – Bronek Apr 06 '23 at 12:13

score 4 · Answer 9 · edited Jan 09 '20 at 11:26

4

This Solution in Angular 8 worked for me in Reactive Forms

Name your Form something like this

<form #regForm="ngForm">

Create Object of UI Form using ViewChild

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

use this, after submit call.

this.myForm.resetForm();

submitted false your validations

this.submitted = false;

edited Jan 09 '20 at 11:26

Antoine Delia

1,728
5
26
42

answered Jan 09 '20 at 09:13

Shahzad Mehmood

51
4

There's no need for this, simply calling reset on the formGroup object is enough- – chrismarx Apr 24 '20 at 22:07

score 3 · Answer 10 · edited Nov 06 '18 at 14:01

3

Building up from Benny Bottema's answer, I was able to reset the form including validations using resetForm() in Angular 6.

class YourComponent {

   @ViewChild("yourForm")
   yourForm: NgForm;

    onSubmit(): void {
     doYourThing();
     this.yourForm.resetForm();
    }
}

edited Nov 06 '18 at 14:01

PJProudhon

835
15
17

answered Nov 06 '18 at 12:27

Shabir Hamid

148
1
8

score 2 · Answer 11 · edited Jun 13 '19 at 14:32

2

This worked for me in Angular 5 using template driven forms (it will not work for reactive forms)

<form #myForm = "ngForm" (submit)="callMyAPI(); myForm.resetForm()">

This resets both form values and validations.

edited Jun 13 '19 at 14:32

Mauricio Gracia Gutierrez

10,288
6
68
99

answered Jul 06 '18 at 10:45

Kumar Sidharth

578
5
13

2

@Ashwin , this will work for template driven forms (formsModule) and not for model driven forms (reactiveFormsModule). – Kumar Sidharth Jul 20 '18 at 07:42

score 2 · Answer 12 · edited Jul 08 '20 at 11:21

2

On resetting by using YourformName.reset() I was facing validation error issues. So use YourformName.resetForm() in your .ts file . It is working correctly now.

I am using template driven form in Angular btw.

edited Jul 08 '20 at 11:21

Steffen Moritz

7,277
11
36
55

answered Jul 08 '20 at 10:59

Shweta Singh

31
1

Jay Byford-Rew · Answer 13 · 2016-05-17T08:51:14.213

I've recently considered this as there is currently (May 2016) nothing architected into Angular2 for this as yet.

Considering the user cannot enter 'undefined' or 'null' and the validation is mainly used to display form errors to the user then just reset the control values to Null

myControl.updateValue(null);

You will need to add this condition when deciding to display the control errors in your UI simply by adding

if (myControl.value !== undefined && myControl.value !== null) {
   //then there is reason to display an error
}

(this check because Validators.Required treats blank content as valid)

Hope this helps.

score 1 · Answer 14 · answered Sep 04 '19 at 03:38

If you are using Angular Material and using <mat-error>, only way it worked for me is this. You have to use FormGroupDirective.

@ViewChild(FormGroupDirective) formDirective: FormGroupDirective;

submitBtnClick() {
  this.formDirective.resetForm();
}

score 0 · Answer 15 · answered Jan 19 '16 at 18:16

0

if you use model-driven forms i.e ngFormModel, Defining the controlGroup once again after submitting will solve this.Refer this link

answered Jan 19 '16 at 18:16

Nishanthd

199
2
13

i have checked the link you have provided. The given method is working but i think that is not the right way to reset the form. Actually he is creating a new form on every submit instead of resetting. – Mubashir Jan 20 '16 at 05:13
1

@Mubashir currently there is no other way. https://github.com/angular/angular/issues/4933, https://github.com/angular/angular/issues/6169 – Günter Zöchbauer Jan 20 '16 at 08:19
1

The link is broken. – Abdul Rehman Sayed Oct 17 '18 at 05:27

score 0 · Answer 16 · answered Jul 14 '20 at 12:26

In the latest Angular versions you just need to run this.form.reset() (it marks everything as pristine and untouched and all that stuff under the hood) and then update value and validity for all the child form controls/groups/arrays.

Unfortunately, there's no direct way to do this for the nested controls without manual children traversal, at least for now.

Thofiq · Answer 17 · 2020-12-24T16:38:51.437

0

Angular Reactive Forms

onCancel(): void {
    this.registrationForm.reset();
    this.registrationForm.controls['name'].setErrors(null);
    this.registrationForm.controls['email'].setErrors(null);
  }

edited Dec 24 '20 at 16:38

answered Dec 24 '20 at 16:25

Thofiq

29
2

score 0 · Answer 18 · answered Dec 16 '21 at 00:28

0

Just loop over the form controls and make them pristine

     (Object as any).values(this.mainForm.form.controls).forEach((control: FormControl) => {
        control.markAsUntouched();
        control.markAsPristine();
      });

answered Dec 16 '21 at 00:28

Ibrahim Abu Lubbad

424
2
7

score 0 · Answer 19 · answered Mar 20 '23 at 13:20

0

After looking at all the answers ,

this is the only thing i got to work ...

    (Object as any).values(this.formGroup.controls).forEach((control: FormControl) => {
      control.setErrors(null);
  });

answered Mar 20 '23 at 13:20

yaniv

152
5
15

score -1 · Answer 20 · answered Jun 01 '22 at 08:05

-1

Make sure that your button type = button !!!

by default html button get type="submit"

answered Jun 01 '22 at 08:05

שלמה ילין

1

score -3 · Answer 21 · answered Jan 14 '20 at 14:55

Angular 8 Form reset validation errors

Create form:

 this.userForm = this.formBuilder.group({
  firstName: ['', [Validators.required, Validators.minLength(2)]],
  email: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')]]});

Reset form:

this.userForm.reset();
this.userForm.controls.userEmail.setErrors(null);

How to reset form validation on submission of the form in ANGULAR 2

21 Answers21

Linked