Как добавить условные валидаторы в formBuilder Angular

Question

В Angular 7.x с использованием formBuilder и ReactiveForms я пытаюсь поместить валидатор в форму, основанную на роли пользователя. Поэтому, когда у пользователя другой role, он / она должен заполнить поле. Я храню этого пользователя в переменной, хранящейся в классе.

Я не хочу ставить валидатор в подписку valueChange, а в первоначальную сборку. Как я могу это сделать? Ниже немного кода.

 buildForm(): void {
    this.accountForm = this.formBuilder.group({
      firstName: [this.user.firstName, Validators.required],
      initials: [this.user.initials, Validators.required],
      lastNamePrefix: [this.user.lastNamePrefix],
      lastName: [this.user.lastName, Validators.required],
      cellPhoneNumber: [this.user.cellPhoneNumber], <-- make this one required if the role of the user is x
      ]),
    });
  }

Answer 1

Если предположить, что роль пользователя не изменится после установки валидатора, подход будет следующим:

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

function createCellPhoneValidator(user: FooUser): ValidatorFn {
  return user.role === x ? Validators.required : Validators.nullValidator;
}

export class FooComponent {
  buildForm(): void {
    this.accountForm = this.formBuilder.group({
      firstName: [this.user.firstName, Validators.required],
      initials: [this.user.initials, Validators.required],
      lastNamePrefix: [this.user.lastNamePrefix],
      lastName: [this.user.lastName, Validators.required],
      cellPhoneNumber: [this.user.cellPhoneNumber, createCellPhoneValidator(this.user)],
    });
  }
}

Если роль может измениться, то вам необходимо будет повторно оценитьроль каждый раз перед выполнением проверки.Это можно сделать как:

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

export class FooComponent {
  buildForm(): void {
    this.accountForm = this.formBuilder.group({
      firstName: [this.user.firstName, Validators.required],
      initials: [this.user.initials, Validators.required],
      lastNamePrefix: [this.user.lastNamePrefix],
      lastName: [this.user.lastName, Validators.required],
      cellPhoneNumber: [this.user.cellPhoneNumber, this.cellPhoneValidator],
    });
  }

  private readonly cellPhoneValidator: ValidatorFn = c => {
     return this.user.role === "x" ? Validators.required(c) : Validators.nullValidator(c);
   }
}