Conditional Angular Reactive Form

custom-validators.ts

import { ValidatorFn } from '@angular/forms';

export type BooleanFn = () => boolean;

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;
  };
}

myComp.ts

import { conditionalValidator } from './custom-validators';

export type Types = 'a' | 'b';

@Component({
  selector: 'app-component',
  templateUrl: './component.component.html',
  styleUrls: ['./component.component.scss']
})
export class SomeComponent {
  costForm = this.fb.group({
    type: this.fb.control<Types>('a', [Validators.required]),
    fieldA: [
      null,
      [conditionalValidator(this.checkType('a'), Validators.required, 'Required')]
    ],
    fieldB: [
      null,
      [conditionalValidator(this.checkType('b'), Validators.required, 'Required')]
    ],
    anotherField: [null, [Validators.required]]
  });

  constructor(private fb: FormBuilder) {}

  private checkType<Types>(type: Types) {
    return () => {
      const fieldType = this.myForm.controls.type.value;

      return type === fieldType;
    };
  }
}