reset validations after form reset(ReactiveForms)

Question

HTML:

<form [formGroup]="locationForm" #myForm="ngForm" class="formContainer">

<div class="buttonContainer">
      <section class="btn1">
          <button 
          (click)="addAnotherMethod()"
          mat-raised-button 
          color="primary"> Add another method </button>
      </section>

      <section>
          <button
          (click)="addAnotherLocation()"
          mat-raised-button 
          color="primary"> Add another location </button>
      </section> 
    </div>

.TS File

@ViewChild('myForm') currentLocationForm;

addAnotherLocation(): void{
    if(this.locationForm.valid){
      //send data to redux
      }))
    }
    this.currentLocationForm.resetForm()
  }

addAnotherMethod: void {
    if(this.locationForm.valid){
     //send data to redux
      }))
    }
    this.currentLocationForm.resetForm()
  }

With the above code I'm able to reset the form after the data is sent to redux,but after reset, the validation error messages in the new form comes up saying to fill the required fields. I need help in using the correct method in resetting this form and clearing validations when new form is shown. I may be also using wrong method to call two button functions. Thank you.

Can you provide stackblitz? – Prashant Pimpale May 29 '19 at 13:07 — Prashant Pimpale, May 29 '19 at 13:07

Nico · Answer 1 · 2019-05-29T15:18:48.950

2

~~If you're looking to reset the form back to it's original state. Meaning before anything has been touched then Mark as Pristine would be your best bet.~~

Actually markAsPristine would do what you are expecting but also recalculate the validity based on the form values.

Reset is what would do both clear the form and mark it as it was never touched aka Pristine

So in code you would do something like.

this.locationForm.reset();

Which would mark the fromGroup and all it's children as pristine. This would effectively reset your form and should not have any validation errors.

Let me know if this helps!

Ex. https://angular-qv2mfx.stackblitz.io

edited May 29 '19 at 15:18

answered May 29 '19 at 13:35

Nico

1,961
17
20

Thank you, i added it but got the same issue :( – PremKumar May 29 '19 at 14:05
1

Updated with example it seems pristine recalculates. I updated my answer in respect of this and added a stackblitz example – Nico May 29 '19 at 15:19

score 1 · Accepted Answer · answered May 29 '19 at 13:12

1

You have 2 things in your form: FormGroup and FormGroupDirective. To get the errors to go away, you need to reset both of them:

this.currentLocationForm.resetForm();
this.locationForm.reset();

See this post for more details about why.

answered May 29 '19 at 13:12

Jesse

2,391
14
15

Thank you, the post link you gave worked for me. added (ngSubmit) ="submitForm(locationForm,myForm)" – PremKumar May 29 '19 at 14:12

reset validations after form reset(ReactiveForms)

2 Answers2