Angular: How to correctly reset reactive forms

Question

Using Angular 6 here with reactive form.

I have few controls on my page with submit and reset button. All the controls have required field validation on them. When the user clicks the submit button all the controls should be selected. On clicking the reset button I want to reset all the controls to their initial state.

Below is the html of one of my control:

 <div class="form-group" [formGroup]="userForm">
  <label class="col-md-2 control-label">Environment</label>
  <div class="col-md-4" [ngClass]="{ 'has-error': userForm.hasError('required', ['environment']) && isSubmitted}">
    <select class="form-control input-large" formControlName="environment">
      <option value=''>-- Select --</option>
      <option [ngValue]="d.Id" *ngFor="let d of data">
        {{d.Name}}
      </option>
    </select>
    <div class="invalid-feedback">
      <em *ngIf="userForm.hasError('required', ['environment']) && isSubmitted">*Required</em>
    </div>
  </div>
</div>

Below is the reset button click in my controller:

  resetClicked() { 
    this.createObjectForm.reset();    
  }

The above code works, but the issue is it also fires all the validation again so all my controls become red.

I searched and tried the below code:

  Object.keys(this.createObjectForm.controls).forEach(key => {
        this.userForm.get(key).clearValidators();
  });

But this one works only when I click my reset button twice.

I also tried with below code, but same result :

this.userForm.markAsPristine();
this.userForm.markAsUntouched();
this.userForm.updateValueAndValidity();

Could anyone provide their inputs.

Demo: https://stackblitz.com/edit/angular-v6l2z5-eseqlr

can you create a stackblitz demo.....or upload your code....because resetting the form should simply reset the form to untouched state. — j4rey
– j4rey, Commented Aug 23, 2019 at 13:49
Add a check on dirty. has-error should only be visible if the control has error and if its dirty. Hopefully it will be pristine again if you reset the form — Jens Alenius
– Jens Alenius, Commented Aug 23, 2019 at 14:16
this.myReactiveForm.reset(this.myReactiveForm.value); stackoverflow.com/a/43759912/9945674 — GaryB
– GaryB, Commented Aug 23, 2019 at 14:53

Jens Alenius · Accepted Answer · 2019-08-23 15:05:07Z

4

When you reset the form the control goes back to its invalid state(it has not been choosen yet). So you need to set isSubmitted = false;

    resetClicked() {
     this.userForm.reset();  
     this.isSubmitted = false;
  }

(your stackblitz helped)

And this might be better to use in the html

<em *ngIf="userForm.controls.environment.invalid && isSubmitted">*Required</em>

edited Aug 23, 2019 at 15:05

answered Aug 23, 2019 at 14:12

Jens Alenius

1,9412 gold badges17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felix Lemke · Accepted Answer · 2019-08-23 14:16:46Z

0

You can create a form template reference.

<form #formRef="ngForm"></form>

Access it in your component class with

@ViewChild('formRef', { static: true }) formRef;

Then you can reset the form including all validators with

this.createObjectForm.reset();
this.formRef.resetForm();

answered Aug 23, 2019 at 14:16

Felix Lemke

6,4863 gold badges46 silver badges69 bronze badges

2 Comments

Tony Over a year ago

This is for template driven form not reactive form

Felix Lemke Over a year ago

That is just wrong. It works flawlessly with reactive forms

yurzui · Accepted Answer · 2019-08-23 15:28:56Z

0

In order to correctly to reset reactive forms you shouldn't invent workarounds but rather use want Angular and html give you:

<form [formGroup]="userForm" #ngForm="ngForm" (ngSubmit)="onSubmit()">

    <div *ngIf="... ngForm.submitted">
       Show errors
    </div>

    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
</form>

Forked Stackblitz

answered Aug 23, 2019 at 15:28

yurzui

215k32 gold badges450 silver badges413 bronze badges

Collectives™ on Stack Overflow

Angular: How to correctly reset reactive forms

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related