Different validators for Angular form field based on another field value

Question

I have a reactive form that has two fields: searchType and number. The field searchType can be '0' or '1' only. number is a number and number has some validation.

this.searchForm = this.formBuilder.group({
  searchType: ['0'],
  number: [
    undefined,
    [ Validators.required, Validators.minLength(6) ]
  ]
});

But now I want to add some specific validator for number only if searchType is 1. For example if searchType is 0 I have to use [ Validators.required, Validators.minLength(6) ], but if searchType is 1 I have to use [ Validators.required, Validators.minLength(8), Validators.minLength(20)]. How can I do that?

AVJT82 · Accepted Answer · 2017-10-29 08:44:36Z

3

You can have a change event on your searchType, or then subscribe to valueChanges and then set the validators for your number form control.

searchtypeCtrl: FormControl;
numberCtrl: FormControl;

this.searchForm = this.formBuilder.group({
  searchType: ['0'],
  number: [undefined,[ Validators.required, Validators.minLength(6) ]]
});
// set form controls to variables
this.searchTypeCtrl = this.searchForm.get('searchType');
this.numberCtrl = this.searchForm.get('number');

and the valueChanges. As mentioned you could also listen to some change event and call a method that checks the value of the searchTypeCtrl and updates validators accordingly.

searchTypeCtrl.valueChanges.subscribe(value => {
  value === 0  ?  this.numberCtrl.setValidators([..conditional validators..]) :
                  this.numberCtrl.setValidators([..conditional validators..])

  this.numberCtrl.updateValueAndValidity();
})

edited Oct 29, 2017 at 8:44

answered Oct 22, 2017 at 12:17

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

Collectives™ on Stack Overflow

Different validators for Angular form field based on another field value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related