angular 5 условно проверить поле на основе значения другого поля

Как условно проверить поле на основе значения другого поля? Вот что я пробовал, но, похоже, это не работает

this.PDform = _formbuilder.group({
    [...]
    'intlNumber': ['',this.nationality == 'Abroad' ? Validators.compose([Validators.pattern(this.phoneNumberExp), Validators.maxLength(14), Validators.minLength(11), Validators.required]) : Validators ]
    [...]
})

person hopeforall    schedule 21.10.2018    source источник
comment
Должен ли this.nationality быть еще одним элементом управления формой? или?   -  person Brandon    schedule 21.10.2018
comment
Возможный дубликат условной проверки в Angular 2   -  person User3250    schedule 21.10.2018
comment
Для проверки нескольких свойств может быть лучше использовать один валидатор, который срабатывает всякий раз, когда какой-либо ввод изменяется в этой группе свойств. Есть способ сделать это, сгруппировав эти свойства в подчиненной форме.   -  person HDJEMAI    schedule 21.10.2018
comment
Отвечает ли это на ваш вопрос? Проверка формы Angular 4 для нескольких полей   -  person JayChase    schedule 23.02.2020


Ответы (1)


Вы можете изменить валидаторы для элемента управления формы при изменении значения другого элемента управления формы, подписавшись на valueChanges наблюдаемое, предоставляемое экземпляром элемента управления формы:

const control1 = <FormControl>this.form.get('control1');
const control2 = <FormControl>this.form.get('control2');

control1.valueChanges.subscribe(value => {
  if (value === 'first-condition') {
    control2.setValidators([Validators.required, ...])
  }
  else {
    control2.setValidators(null);
  }

  control2.updateValueAndValidity();
});

Это надуманный пример, но шаблон можно адаптировать для вашего варианта использования. Не забудьте назначить подписку на вашу модель представления и отменить подписку, когда ваш элемент управления будет уничтожен.

Вот пример StackBlitz: https://stackblitz.com/edit/conditional-validation

person Brandon    schedule 21.10.2018
comment
Спасибо за ваш ответ. Однако, похоже, это не работает. Я получил эту ошибку в консоли Cannot read property 'valueChanges' of null. Как мне это исправить, пожалуйста - person hopeforall; 21.10.2018
comment
Когда вы создаете свою форму? - person Brandon; 21.10.2018
comment
Создано ngOnInit() - person hopeforall; 23.10.2018
comment
Вы можете поместить этот код сразу после инициализации формы. - person Brandon; 23.10.2018
comment
Пробовал установить его в ngAfterViewInit(), и он возвращает то же самое - person hopeforall; 23.10.2018
comment
Я постараюсь найти время, чтобы добавить для вас рабочий StackBlitz. Я использую этот шаблон все время. - person Brandon; 23.10.2018
comment
по каким-то причинам я не знаю, я все еще получаю ошибку Cannot read property 'valueChanges' of null и все правильно в stackblitz. Угловой 5 - person hopeforall; 25.10.2018
comment
подписка valueChanges относится к конкретному экземпляру FormControl. Убедитесь, что оператор .get(), как вы видите в StackBlitz, соответствует точному элементу управления в вашей группе форм. Вы можете использовать точечный синтаксис для доступа к вложенным элементам управления. - person Brandon; 25.10.2018
comment
Наконец-то я смог заставить его работать. Мне пришлось установить условие в методе (selectionChange) в элементе mat-select. Спасибо!!! - person hopeforall; 02.11.2018