title: Toggle switch not working inside angular reactive form
body: <p>In my angular 6 application i am using angular reactive form which has a three state toggle switch inside formarray.</p>
  
  <p><strong>Html that has three state toggle:</strong></p>
  
  <pre><code>      &lt;div class="switch-toggle switch-3 switch-candy"&gt;
          &lt;ng-container #buttonIcon *ngFor="let option of options" &gt;
            &lt;input 
              type="radio" 
              formControlName="state"
              [id]="option"
              [value]="option" /&gt;
            &lt;label 
              [attr.for]="option"&gt;
              {{option}}
            &lt;/label&gt;
          &lt;/ng-container&gt;&lt;a&gt;&lt;/a&gt;
        &lt;/div&gt; 
  </code></pre>
  
  <p><strong>Working stackblitz:</strong></p>
  
  <p><a href="https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-kqhsvy" rel="nofollow noreferrer">https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-kqhsvy</a></p>
  
  <p>Please click the <code>add</code> button in the above link to see the inputs.</p>
  
  <p>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..</p>
  
  <p>Kindly help me to make the toggle switch unique for each row and retrieve the values of toggle in each row separately..</p>