CODEWITHSUNDEEP
angularvalidationreset
Alexander
Alexander

Reputation: 1061

Reset Angular 7 Reactive From Validation

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?

Upvotes: 5

Views: 10880

Answers (4)

Alejandro Araujo
Alejandro Araujo

Reputation: 499

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!

Upvotes: 2

Natdrip
Natdrip

Reputation: 1183

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 :)

Upvotes: 2

Vivek Singh
Vivek Singh

Reputation: 299

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

Upvotes: 8

Yuva
Yuva

Reputation: 141

Please use the following code:

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

Upvotes: 9

Related Questions