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

Question

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 ]
    [...]
})

Is `this.nationality` supposed to be another form control? or? — Brandon Taylor, Oct 21 '18 at 00:54
Possible duplicate of [Conditional validation in Angular 2](https://stackoverflow.com/questions/45137545/conditional-validation-in-angular-2) — User3250, Oct 21 '18 at 01:37
For multiple property validation, it may be better to use one validator, that triggers whenever any input will change in that group of properties. There is a way to do this by grouping those properties in a sub form. — HDJEMAI, Oct 21 '18 at 01:58
Does this answer your question? [Angular 4 form validation on multiple fields](https://stackoverflow.com/questions/47347448/angular-4-form-validation-on-multiple-fields) — JayChase, Feb 23 '20 at 10:23

Brandon Taylor · Accepted Answer · 2018-10-23T15:35:56.923

15

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

edited Oct 23 '18 at 15:35

answered Oct 21 '18 at 01:04

Brandon Taylor

33,823
15
104
144

Thanks for your response. However, it seems not to be working. I got this error in the console `Cannot read property 'valueChanges' of null`. How do i fix it please – hopeforall Oct 21 '18 at 01:59
When are you instantiating your form? – Brandon Taylor Oct 21 '18 at 12:10
Instantiated on `ngOnInit()` – hopeforall Oct 23 '18 at 12:00
You can put this code directly after you initialize your form. – Brandon Taylor Oct 23 '18 at 14:30
Tried setting it in `ngAfterViewInit()` and it returns same – hopeforall Oct 23 '18 at 14:54
I will try to find some time to add a working StackBlitz for you. I use this pattern all the time. – Brandon Taylor Oct 23 '18 at 15:02
for some reasons i do not know, i'm still getting the error `Cannot read property 'valueChanges' of null` and everything is right in stackblitz. Angular 5 – hopeforall Oct 25 '18 at 10:16
the valueChanges subscription is on the specific FormControl instance. Make sure that the .get() statement like you see in the StackBlitz matches the exact control in your form group. You can use dot syntax to access nested controls. – Brandon Taylor Oct 25 '18 at 14:53
I was finally able to get it to work. I had to set the condition in a (selectionChange) method in mat-select element. Thanks!!! – hopeforall Nov 02 '18 at 13:15
this bug in angular 14. https://github.com/angular/angular/issues/21109 – manit Sep 28 '22 at 19:41

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

1 Answers1

Linked