Toggle switch not working inside angular reactive form

Question

In my angular 6 application i am using angular reactive form which has a three state toggle switch inside formarray.

Html that has three state toggle:

      <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>

Working stackblitz:

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

Please click the add button in the above link to see the inputs.

For eg.., Click on add button three times and hence added three rows, here the first row toggle switch alone working and remaining row's toggle not working.. Even if the toggle was made in second or third row then only first row is changed..

Kindly help me to make the toggle switch unique for each row and retrieve the values of toggle in each row separately..

Akhi Akl Akhi Akl · Accepted Answer · 2018-12-28T07:30:01

It is because the id of all your label and input are same. change the html to

<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>

Toggle switch not working inside angular reactive form

1 Answers