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

Question

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

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

Answer 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

Answer 2

Я создал пример приложения для проверки приложения на основе условного.

Я использовал '@rxweb/ реактивные-формы-валидаторы'. Он предоставляет условные валидаторы, вам не нужно создавать собственные валидаторы. см. рабочий пример валидаторов на основе условной валидации на основе stackblitz.

Вот шаги, которые я выполнил.

1. npm install @ rxweb / реактивная форма-валидаторы
2. импортировать ' RxReactiveFormsModule ' в корневой модуль.
3. Примените условную проверку к свойству intlNumber.

Вот код условной проверки.

this.userForm = this.formBuilder.group({
  nationality:[''],
  intlNumber:['',[ RxwebValidators.compose({
    validators:[RxwebValidators.required(),
    RxwebValidators.maxLength({value:14}),
    RxwebValidators.minLength({value:11 })

    ],
    conditionalExpression:(x) => x.nationality == 'Abroad'
  })
    ]]
});

Я не установил шаблон, потому что я не знаю, для какого регулярного выражения вы используете. валидатор шаблонов также доступен в классе RxwebValidators.

Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы.