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

Question

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

Три стека, три состояния: https://stackblitz.com/edit/angular-6-template-driven-form-validation-gh1dj1

И мне нужно реализовать то же самое с тем же CSS внутри реактивная форма в каждой строке внутри Formarray.

Для которого я пробовал тот же HTMLи css и дано как formcontrolname как,

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

Но я не смог достичь результата.

Реактивная форма stackblitz: https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-yqraay

Пожалуйста, нажмите на кнопку «Добавить» во втором стеке, чтобы увидеть результат. Добавлен CSS в app.component.css ..

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

Answer 1

Просто добавьте [id] к тегу ввода и [attr.for] к тегу метки.Примерно так:

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

---

Вот вам Рабочий образец StackBlitz для вашей ссылки.

---

Спасибо А. Виннену за его комментарии о последствиях использования предыдущего подхода для производительности.

Answer 2

Вот демонстрация стекаблиц для вашей референции.https://stackblitz.com/edit/angular-szsw3k

Answer 3

Массив опций в вашем реактивном компоненте отличается от трехпозиционного переключателя, который вы реализовали.Тот, что в реальном компоненте, не имеет id.

[
  "on",
  "na",
  "off"
]

. Вы все еще можете использовать это так:

<ng-container #buttonIcon *ngFor="let option of options" >
  <input type="radio" formControlName="state" [checked]="value === option"
               [value]="option" />
        <label (click)="onSelectionChange(option)"  for="{{option}}"> 
            {{option}} //**refer the object as the id filed is missing**
        </label>

Второе отличие состоит в том, чтовам не хватает функции onSelectionChange в вашем реактивном компоненте