Angular 7 Reactive Forms Условная «обязательная» проверка - PullRequest
Новая
       39

Angular 7 Reactive Forms Условная «обязательная» проверка

0 голосов
/ 14 марта 2019

Перед тем, как начать, я не могу опубликовать код, который я написал, поскольку это код компании с конфиденциальной информацией, но я предоставлю фиктивный код ..

Я использую Angular 7, Reactive Forms, у меня есть радиоКнопка, которая всегда присутствует на экране.Если вы выберете опцию «да», под ней появится другой переключатель.Если вы выберете «нет», он не будет отображаться или разрушаться, если он виден в данный момент.(используя ngIf *)

Я собираюсь сделать что-то вроде этого: 

    field: ['', { validators: () => { if (this.isElementShown('blah')) { return Validators.required }}}]

Вот метод "isElementShown": 

  isElementShown(id: string) {
    var element = document.getElementById(id);
       if (document.body.contains(element)) {
          return true;
       }
    return false;
  }

I 'm также выводит все «недопустимые» поля на странице отправки, выполнив это: 

  const invalid = [];
  const controls = this.form.controls;
  for (const name in controls) {
    if (controls[name].invalid) {
      invalid.push(name);
    }
  }
  console.log(invalid);

Поле не отображается как недопустимое при загрузке страницы изначально, когда я нажимаю «да» и появляется второй переключательна экране он отображается как недействительный.Что хорошо, вот чего я от этого ожидаю.Но когда я изменяю опцию «нет» на первой радиокнопке, она все равно отображается в консоли как «недействительная».Даже если второй переключатель выключен из DOM.

У кого-нибудь есть идеи, как это исправить?Я чувствую, что я почти там.Я просто пукаю мозг в этот момент!Спасибо.

1 Ответ

0 голосов
/ 15 марта 2019

Условно Обязательный, которого вы можете достичь с помощью обязательного валидатора @ rxweb / реактивной формы-валидатора.

Вы просто должны установить свое условие в необходимом валидаторе. 

 second:['',RxwebValidators.required({conditionalExpression:(x)=> {
return x.first == 'yes'
  }})]

Полный код TS 

this.userFormGroup = this.formBuilder.group({
  first:[''],
  second:['',RxwebValidators.required({conditionalExpression:(x)=> {
return x.first == 'yes'
  }})]
})

Я зарегистрировал 'RxReactiveFormsModule' в корневом модуле.

Проверьте пример stackblitz

...