How to do required-if in Angular Reactive Forms?

The following will do the trick:

toggle() {
  this.fooRequired = !this.fooRequired;
  this.form.controls.foo.setValidators(this.fooRequired ? null : [Validators.required]);
  this.form.controls.foo.updateValueAndValidity();
}

Here, based on the fooRequired boolean, the validators are set or removed. Finally, the new form control settings are updated.

You can use a custom function that gonna be responsible for adding or removing the Validators

export function conditionalValidator(
  predicate: BooleanFn,
  validator: ValidatorFn,
  errorNamespace?: string
): ValidatorFn {
  return formControl => {
    if (!formControl.parent) {
      return null;
    }
    let error = null;
    if (predicate()) {
      error = validator(formControl);
    }
    if (errorNamespace && error) {
      const customError = {};
      customError[errorNamespace] = error;
      error = customError;
    }
    return error;
  };
}

Then you can use it inside you form control:

this.myForm = this.fb.group({
  myEmailField: [
    "",
    [
      // some normal validatiors
      Validators.maxLength(250),
      Validators.minLength(5),
      Validators.pattern(/.+@.+\..+/),
      // custom validation
      conditionalValidator(
        // depends on fooRequired value
        () => this.fooRequired,
        Validators.required,
        "illuminatiError"
      )
    ]
  ]
});

Finally you can toggle the value of fooRequired and see the result:

  toggle() {
    this.fooRequired = !this.fooRequired;
    this.myForm.get("myEmailField").updateValueAndValidity();
  }

Here is a live demo to help you with implementing the above answer

You need to use setValidator() and updateValueAndValidity() for your foo form control based on the fooRequired variable. These two functions will update the validation dynamically.

Demo: https://stackblitz.com/edit/angular-setvalidators-jec7jo?file=src%2Fapp%2Fapp.component.ts

More to read: https://www.tektutorialshub.com/angular/how-to-add-validators-dynamically-using-setvalidators-in-angular/