Angular Reactive Form Conditional Validation on Nested FormGroup FormControl?

Question

I am developing a User Form.

I am summarizing my issue, if the user ticked on medical policy checkbox then user have to fill the medical policy detail.

user form group code below:

let userForm = this.myFormBuilder.group({
  userName: ['',Validators.required],
  password: ['',Validators.required],
  isMedicalPolicy: [false],
  medicalPolicyInfo: this.myFormBuilder.group({
    policyNumber: ['',Validator.maxLength(10)], // how to apply conditional required validation here, 
      if is isMedicalPolicy value is true.
  });
});

Please help on this.

You'll need to observe changes on the isMedicalPolicy field value and then alter the validation of the other fields. — Brandon Taylor
– Brandon Taylor, Commented Oct 14, 2018 at 16:52

Brandon Taylor · Accepted Answer · 2018-10-14 17:23:24Z

2

You can watch for changes to individual form control values, then alter the validation of other controls based on the value.

Example:

const isMedicalPolicyControl = this.userForm.get('isMedicalPolicy');
const policyNumberControl = this.userForm.get('medicalPolicyInfo.policyNumber');

this.subscription = isMedicalPolicyControl.valueChanges.subscribe(value => {

  if (value) {
    policyNumberControl.setValidators([
      Validators.required,
      Validator.maxLength(10)
    ]);
  }
  else {
    policyNumberControl.setValue('');
    policyNumberControl.setValidators(null);
  }

  policyNumberControl.updateValueAndValidity();

});

You'll want to unsubscribe from the valueChanges observable when your component is destroyed.

edited Oct 14, 2018 at 17:23

answered Oct 14, 2018 at 16:58

Brandon Taylor

34.8k16 gold badges109 silver badges155 bronze badges

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

3 Comments

vinit tyagi Over a year ago

Thanks, Sorry, If forgot to add maxLength validator on policyNumber field. As per the code, if I set the validator null then my maxlength validation will not work. then how do I a manage or I need to add maxLength validator every time if value is true.

Brandon Taylor Over a year ago

No worries. I've updated the sample code. Since your validators only apply if the isMedicalPolicy control has a value of true, you can just assign/de-assign them when the value changes.

Karthik Over a year ago

Calling policyNumberControl.updateValueAndValidity() inside the function isMedicalPolicyControl.valueChanges.subscribe is causing an infinite loop

jalil · Accepted Answer · 2020-06-22 17:38:49Z

0

you can also simply use ternary operators like:

 medicalPolicyInfo: this.myFormBuilder.group({
    policyNumber: ['', isMedicalPolicy ? [ Validator.maxLength(10), Validators.required]:[]]
     
  });

answered Jun 22, 2020 at 17:38

jalil

5051 gold badge7 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular Reactive Form Conditional Validation on Nested FormGroup FormControl?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related