Тумблер не работает внутри угловой реактивной формы - PullRequest
Новая
       22

Тумблер не работает внутри угловой реактивной формы

0 голосов
/ 28 декабря 2018

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

HTML, который имеет три состояния переключения: 

      <div class="switch-toggle switch-3 switch-candy">
        <ng-container #buttonIcon *ngFor="let option of options" >
          <input 
            type="radio" 
            formControlName="state"
            [id]="option"
            [value]="option" />
          <label 
            [attr.for]="option">
            {{option}}
          </label>
        </ng-container><a></a>
      </div>

Рабочий стек стека:

https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-kqhsvy

Пожалуйста, нажмите кнопку add в ссылке выше для просмотра входных данных.

Например,.., нажмите кнопку «Добавить» три раза и, следовательно, добавили три строки, здесь тумблер первого ряда работает один, а тумблер оставшегося ряда не работает. Даже если тумблер был сделан во втором или третьем ряду, то изменяется только первая строка ..

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

1 Ответ

0 голосов
/ 28 декабря 2018

Это потому, что id всех ваших меток и входных данных одинаковы.измените HTML на 

<div class="switch-toggle switch-3 switch-candy">
  <ng-container #buttonIcon *ngFor="let option of options" >
    <input 
      type="radio" 
      formControlName="state"
      [id]="option+i"
      [value]="option" />
    <label 
      [attr.for]="option+i">
      {{option}}
    </label>
  </ng-container><a></a>
</div>
...