title: Toggle button inside angular reactive form
body: <p>In my angular reactive form i am trying to use <strong>three state toggle switch</strong> for which i have tried three state switch separately in the link</p>
  
  <p><strong>Three state toggle stackblitz:</strong> <a href="https://stackblitz.com/edit/angular-6-template-driven-form-validation-gh1dj1" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-6-template-driven-form-validation-gh1dj1</a></p>
  
  <p>And i need to implement the same with same css inside <strong>reactive form</strong> on each row inside formarray.</p>
  
  <p>For which i have tried the same html and css and given as <code>formcontrolname</code> like,</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" [checked]="value === option"
                 [value]="option" /&gt;
          &lt;label (click)="onSelectionChange(option)"  for="{{option}}"&gt;{{option.id}}
          &lt;/label&gt;&lt;/ng-container&gt; &lt;a&gt;&lt;/a&gt;
            &lt;/div&gt; 
  </code></pre>
  
  <p>But i couldn't achieve the result.</p>
  
  <p><strong>Reactive form stackblitz:</strong> <a href="https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-yqraay" rel="nofollow noreferrer">https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-yqraay</a></p>
  
  <p>Please click over the add button in the second stackblitz to see the result.. Added the css in <code>app.component.css</code>..</p>
  
  <p>Kindly help me to implement the three state toggle switch as like in the first stackblitz into the reactive form in second stackblitz and need to get the values of selected toggle..</p>