javascript - Toggle button inside angular reactive form - Stack Overflow

admin管理员组

文章数量:1355123

In my angular reactive form i am trying to use three state toggle switch for which i have tried three state switch separately in the link

Three state toggle stackblitz:

And i need to implement the same with same css inside reactive form on each row inside formarray.

For which i have tried the same html and css and given as formcontrolname like,

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

But i couldn't achieve the result.

Reactive form stackblitz:

Please click over the add button in the second stackblitz to see the result.. Added the css in appponent.css..

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

In my angular reactive form i am trying to use three state toggle switch for which i have tried three state switch separately in the link

Three state toggle stackblitz: https://stackblitz./edit/angular-6-template-driven-form-validation-gh1dj1

And i need to implement the same with same css inside reactive form on each row inside formarray.

For which i have tried the same html and css and given as formcontrolname like,

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

But i couldn't achieve the result.

Reactive form stackblitz: https://stackblitz./edit/disable-group-control-value-on-another-control-value-for-yqraay

Please click over the add button in the second stackblitz to see the result.. Added the css in app.ponent.css..

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

• javascript
• angular
• typescript
• angular6
• angular-reactive-forms

Share Improve this question Follow edited Dec 27, 2018 at 18:21 Maniraj Murugan asked Dec 27, 2018 at 18:14 Maniraj MuruganManiraj Murugan 9,0842424 gold badges7676 silver badges122122 bronze badges 2

• I'm already looking into it. Your three-way switch doesn't seem to work in the Reactive Forms. – SiddAjmera Commented Dec 27, 2018 at 18:26
• Yes you are correct its not working inside reactive form.. Kindly help me in it please to include the three state switch inside reactive form.. – Maniraj Murugan Commented Dec 27, 2018 at 18:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Just add an [id] to the input tag and an [attr.for] to the label tag. Something like this:

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

---

Here's a Working Sample StackBlitz for your ref.

---

Thanks to A.Winnen for his ments on the performance implications of using the previous approach.

The options array in your reactive ponent is different than the 3 way switch you implemented. The one in the real ponent does not have the id.

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

You can still use that like this:

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

Second difference is, you are missing the onSelectionChange function in your reactive ponent

Here's a stackblitz demo for your referance. https://stackblitz./edit/angular-szsw3k

本文标签： javascriptToggle button inside angular reactive formStack Overflow