Conditional validation in Angular 2

Question

Validation in Angular 2 is pretty simple, which is awesome. However, how could an optional field be made optional if another field is selected.

Here are my rules

this.contractsFilter = this.fb.group({
  selectedContractType: ['', [Validators.required]],
  selectedYear: ['', [Validators.required]],
  selectedPde: ['', [Validators.required]],
  refNo: ['', []]
});

I want other fields to be marked as mandatory in order to be "un-required" if refNo is provided by the user.

Answer 1

Here's how you can dynamically add or remove a validator for some control

private addValidator(control, validator) {
    let existingValidators = control.validator;
    control.setValidators(Validators.compose([existingValidators, validator]));
    control.updateValueAndValidity();
  }

And remove the validator

  private removeRequiredValidator(control, otherValidators) {
    control.clearValidators();
    if (otherValidators) {
      control.setValidators(otherValidators);
    }
    control.updateValueAndValidity();
  }

Answer 2

, setValidators . , , .

:

this.contractsFilter = this.fb.group({
  selectedContractType: ['', [Validators.required]],
  selectedYear: ['', [Validators.required]],
  selectedPde: ['', [Validators.required]],
  refNo: ['', []]
});

valueChanges refNo:

this.contractsFilter.controls['refNo'].valueChanges.subscribe(value => {
  if (value) { // There is a refNo specified
    this.contractsFilter.controls['selectedContractType'].disable();
    this.contractsFilter.controls['selectedYear'].disable();
    this.contractsFilter.controls['selectedPde'].disable();
  } else {
    this.contractsFilter.controls['selectedContractType'].enable();
    this.contractsFilter.controls['selectedYear'].enable();
    this.contractsFilter.controls['selectedPde'].enable();
  }
});

, , .

Answer 3

setValidators /

import {FormControl, Validators, FormGroup} from "@angular/forms";

onRefNoEntered() {
        if(this.contractsFilter.controls['refNo'].value && this.contractsFilter.controls['refNo'].valid) {
            this.contractsFilter.controls['selectedContractType'].setValidators(null);
            this.contractsFilter.controls['selectedYear'].setValidators(null);
            this.contractsFilter.controls['selectedPde'].setValidators(null);
        }
        else {
            this.contractsFilter.controls['selectedContractType'].setValidators(Validators.required);
            this.contractsFilter.controls['selectedYear'].setValidators(Validators.required);
            this.contractsFilter.controls['selectedPde'].setValidators(Validators.required);
        }
}