Toggle button inside angular reactive form

Question

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.com/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.com/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.component.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..

I'm already looking into it. Your three-way switch doesn't seem to work in the Reactive Forms. — SiddAjmera
– 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
– Maniraj Murugan, Commented Dec 27, 2018 at 18:30

SiddAjmera · Accepted Answer · 2018-12-28 09:13:39Z

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 comments on the performance implications of using the previous approach.

edited Dec 28, 2018 at 9:13

answered Dec 27, 2018 at 18:37

SiddAjmera

39.6k7 gold badges78 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Maniraj Murugan Over a year ago

Sorry for missing one thing.. In default na needs to be as selected for all the rows..

SiddAjmera Over a year ago

Just add state: 'na' in your addCreds method when you push a new FormGroup

Maniraj Murugan Over a year ago

I am able to check in mobile only now so as of i have seen there is no issue with what i am in need.. I will accept your answer if any queries will let you know..

SiddAjmera Over a year ago

@undefined, no issues. Glad I could help. :)

Eliseo Over a year ago

@SiddAjmera, Each time I see a (ngModelChange) in a ReactiveForm I go to crazy :)

|

Aragorn · Accepted Answer · 2018-12-27 18:30:17Z

1

The options array in your reactive component is different than the 3 way switch you implemented. The one in the real component 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 component

answered Dec 27, 2018 at 18:30

Aragorn

5,3295 gold badges28 silver badges40 bronze badges

Comments

Gauravbhai Daxini · Accepted Answer · 2019-01-18 05:43:19Z

0

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

answered Jan 18, 2019 at 5:43

Gauravbhai Daxini

2,2002 gold badges26 silver badges29 bronze badges

Collectives™ on Stack Overflow

Toggle button inside angular reactive form

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related