Reset Angular 7 Reactive From Validation

Question

I am using an Angular Reactive form as a search form. I want to be able to reset the form. I did this with the following code:

<button type="reset" (click)="onReset()">
    Reset
</button>

The reset method does the following:

onReset(){
    this.myForm.reset();
    this.myForm.markAsPristine();
    this.myForm.markAsUntouched();
}

This makes all the form controls empty. But it does not reset the form validation. I deactivate the submit button if the form is not valid. This works when I first use the form. After I click on reset the validation does not work anymore. It seems to be deaktivated after submitting the form.

How can I solve this? What am I missing here?

The validation checks if the form is empty. If it is empty the form is not valid and the form submit button will be disabled. After I reset the form the form submit button will not be disabled if the form is empty. Therefore I could submit an empty form after resetting the form. — Alexander, Apr 30 '19 at 07:23

score 8 · Answer 1 · answered Apr 30 '19 at 07:22

8

Please use the following code:

this.myForm.reset()
Object.keys(this.myForm.controls).forEach(key => {
  this.myForm.controls[key].setErrors(null)
});

answered Apr 30 '19 at 07:22

Yuva

131
1
6

score 8 · Accepted Answer · answered Apr 30 '19 at 07:23

8

You can remove validations on specific formGroup/formcontrol by using clearValidators() for reactive forms.

 this.formGroup.clearValidators() or      
 this.formGroup.controls.controlName.clearValidators()

After this, you have to update form control with the removed validator

this.formGroup.controls.controlName.updateValueAndValidity()

This helped me to resolve same issue, hope it helps you to

answered Apr 30 '19 at 07:23

Vivek Singh

289
1
4

This seems to work, but there is one little thing that does not work. I am using this code on my submit form: [disabled]="!myForm.valid" After I click on reset the button is still visible. Only when I change something in the form this will be not visible. It seems like the validation is not fired when pressing reset. Can I somehow trigger the validation manually when clicking on reset so that the button is not visible after clicking reset? – Alexander Apr 30 '19 at 07:49
What is happening here is, your form is valid when you removed validators. So you require something to handle the button's disable view. – Vivek Singh Apr 30 '19 at 08:22
This solution is not working for >12 and so, if you are looking for a proper way to get it "solved" you will consider reading this thread https://github.com/angular/components/issues/4190#issuecomment-305222426 – angellica.araujo Dec 16 '21 at 20:55

score 2 · Answer 3 · answered Dec 12 '19 at 01:15

2

I am late to the party here the thing that worked for me was patch value. Which resets the validator control that was turning my inputs red.

this.formgroup.patchValue({ formControlName: [null, Validators.required] });

Hope this help someone :)

answered Dec 12 '19 at 01:15

Natdrip

1,144
1
11
25

score 2 · Answer 4 · answered May 19 '20 at 23:32

I had the problem of wanting to change the validation type of the form on the fly. A combination like the one below works quite well for me and I get rid of various problems in the app view:

onChange(event: any) {
   this.valForm.controls.controlName.setErrors(null);
   this.valForm.controls.controlName.clearValidators();
   if (conditionA) {
       this.valForm.get('controlName').setValidators([Validators.required, this.patternA]);
       this.valForm.controls.controlName.updateValueAndValidity();
   } else {
       this.valForm.get('controlName').setValidators([Validators.required, this.patternB]);
       this.valForm.controls.controlName.updateValueAndValidity();
   }
}

I hope it is as useful to you as it is to me!

Reset Angular 7 Reactive From Validation

4 Answers4

Linked