Angular not resetting validators

Question

Angular 6:

I have this form builder:

this.issuerDetails = this.formBuilder.group({
  paymentInstruction: ['', [Validators.required]],
  subscriptionTemplateHtml: ['', [Validators.required]],
});

with this getter

get issuerDetailsForm() { return this.issuerDetails.controls; }

down the road I remove the validators, and reset the value / set to pristine

this.issuerDetailsForm.subscriptionTemplateHtml.clearValidators();
this.issuerDetailsForm.subscriptionTemplateHtml.reset();
this.issuerDetailsForm.paymentInstruction.clearValidators();
this.issuerDetailsForm.paymentInstruction.reset();

When I go to re-enable these validators

this.issuerDetailsForm.subscriptionTemplateHtml.setValidators(Validators.required);
this.issuerDetailsForm.paymentInstruction.setValidators(Validators.required);

They aren't being triggered properly on form submission by the user

Why is this?

I don't understand. You are trying to reset issuerDetailsForm, which is not defined. Intead, you need to reset issuerDetails. Any way, updateValueAndValidity() will help you. this.issuerDetails.updateValueAndValidity() will help you here. — Anoop Rajasekhara Warrier, Apr 03 '20 at 05:38
ah right, I have a getter too down the line. Updated the question with new information — Vincent Tang, Apr 03 '20 at 16:14

score 0 · Answer 1 · answered Apr 03 '20 at 02:48

When a validator needs to be reset, updateValueAndValidity must be ran to reset the validators

so after all this code add this:

this.issuerDetailsForm.subscriptionTemplateHtml.updateValueAndValidity({ onlySelf: true });
this.issuerDetailsForm.paymentInstruction.updateValueAndValidity({ onlySelf: true });

It runs the validator and clears out any prior states

What is updateValueAndValidity

score 0 · Answer 2 · answered Apr 03 '20 at 05:43

Below code might help:

this.issuerDetails = this.formBuilder.group({
  paymentInstruction: ['', [Validators.required]],
  subscriptionTemplateHtml: ['', [Validators.required]],
});

For reset:

this.issuerDetails.reset();
this.issuerDetails.updateValueAndValidity();

Angular not resetting validators

2 Answers2