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?

Answer 1

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