Задайте конкретный элемент управления формы (часть большой группы форм) как требуется, только если другой конкретный элемент управления формы в этой группе форм имеет значение

Question

Я видел много других вопросов со сценариями SIMILAR, но не совсем то, что искал.

В моем файле машинописи создается группа форм с целым набором элементов управления формой (идентификатор, имя, фамилия, адрес электронной почты и т. д. и т. д.).Некоторые элементы управления имеют установленный Validators.required, а некоторые нет.

Я столкнулся со сценарием (который, я уверен, довольно распространенный), где я хочу, чтобы только один конкретный элемент управления формы в этой группе был установлен ТОЛЬКО в соответствии с требованиямиЕсли один из других элементов управления в группе имеет значение (другой элемент управления НЕ требуется).

Как лучше всего справиться с этим?

Допустим, например, у меня естьСледующий метод настройки группы форм ...

private initFormClient(): FormGroup {
    let clientGroup = this.fb.group({
        id: [client.id], //hidden
        firstName: [client.firstName, Validators.required],
        lastName: [client.lastName, Validators.required],
        email: [client.email, Validators.required]),
        phone: [client.phone],
        birthday: [moment(client.birthday).format('YYYY-MM-DD'), Validators.required],
        enrollmentDate: [moment(this.workingEnrollment.enrollmentDate).format('YYYY-MM-DD'), Validators.required],
        dischargeDate: [this.workingEnrollment.dischargeDate ?moment(this.workingEnrollment.dischargeDate).format('YYYY-MM-DD') : undefined],
        treatmentLevelDate: [this.workingEnrollment.treatmentLevelDate ? moment(this.workingEnrollment.treatmentLevelDate).format('YYYY-MM-DD') : undefined],
        treatmentLevelId: 
        profileImageUri: [client.profileImageUri],
        profileImageFile: [''],
    });
    return clientGroup;
}

Я хочу установить элемент управления treatmentLevelDate, как требуется, только если значение treatmentLevelId (выбрано пользователем).Я не хочу добавлять глобальный валидатор в группу, если в этом нет необходимости.Я бы предпочел просто узнать, как настроить пользовательский валидатор для отдельного элемента управления, если это возможно.Спасибо за любую помощь!

Answer 1

Вы можете попытаться установить валидаторы динамически, используя функцию setValidators():

ngOnInit() {
  this.form = this.initFormClient();

  this.form.get('firstName').valueChanges.subscribe(val => {
    if ((val || '').split(' ').filter(Boolean).length > 1) {
      this.form.get('lastName').clearValidators();
    }
    else {
      this.form.get('lastName').setValidators(Validators.required);      
    }
    this.form.get('lastName').updateValueAndValidity();
  });
}

В этом примере Фамилия поле будет обязательно, только если Имя поле содержит менее 2 слов.Если поле Имя содержит более 1 слова, поле Фамилия НЕ потребуется.

STACKBLITZ