Получить все элементы управления, реализующие определенную директиву внутри родительского контейнера - PullRequest
Новая
       31

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

0 голосов
/ 28 апреля 2020

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

<form [formGroup]="driverGroup">
   <ul>
      <li>
         <a [invalid]="main" id="main-tab" href="#main">Main data</a>
      </li>
      <li *ngFor="let tab of tabs">
         <a [invalid]="tab.code" [id]="tab.code + '-tab'" [href]="'#' + tab.code">tab.name</a>
      </li>
   </ul>
   <div id="main">
      ...some controls here
   </div>
   <div [id]="tab.code" *ngFor="let tab of tabs">
      ...some other controls here
   </div>
</form>

Я бы хотел, чтобы заголовок каждой вкладки отображался красным, если какой-либо элемент управления в соответствующей форме область недействительна. В идеале я хочу, чтобы мой InvalidDirective искал все FormControl внутри контейнера с указанным идентификатором и проверял их invalid состояние, чтобы переключить его css класс.

Я не знаю, если это Это общепринятая практика в Angular 2+, и если есть лучшие способы сделать это ...

Пример: STACKBLITZ

Моя цель - сделать вкладку заголовки становятся красными, когда соответствующая «подформа» содержит недопустимый элемент управления.

1 Ответ

0 голосов
/ 28 апреля 2020

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

Здесь у вас есть список вкладок. Итак, мы можем предположить - 

tabs[0] ==> FromArray.controls[0]
tabs[1] ==> FormArray.controls[1]
.................................
.................................
tabs[n] ==> FormArray.controls[n]

передать эту информацию в вашу директиву и переключить ваш цвет.

Вот обновленный stackblitz . Это работает для вкладок. Цвет фона вкладок изменяется в соответствии с действительным или недействительным состоянием элементов управления формы внутри этой вкладки.

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

...