angular 5 conditionally validate field based on another field's value

user_8086213 0
Viewed 11204

How to conditionally validate a field based on another field's value? Here's what i've tried but it seems not to work

this.PDform = _formbuilder.group({
    [...]
    'intlNumber': ['',this.nationality == 'Abroad' ? Validators.compose([Validators.pattern(this.phoneNumberExp), Validators.maxLength(14), Validators.minLength(11), Validators.required]) : Validators ]
    [...]
})
angular5 angular-reactive-forms angular-validation angular-forms angular
1 Answers

You can change the validators for a form control when the value of another form control changes by subscribing to the valueChanges observable provided by the form control instance:

const control1 = <FormControl>this.form.get('control1');
const control2 = <FormControl>this.form.get('control2');

control1.valueChanges.subscribe(value => {
  if (value === 'first-condition') {
    control2.setValidators([Validators.required, ...])
  }
  else {
    control2.setValidators(null);
  }

  control2.updateValueAndValidity();
});

This is a contrived example, but the pattern can be adapted for your use case. Don't forget to assign the subscription to your view model and unsubscribe when your control is destroyed.

Here's a StackBlitz example: https://stackblitz.com/edit/conditional-validation

user_5986830
Related