Angular toggle switch issue on duplicated form groupAngular form checkbox default valueNested forms in Angular 2 JS (RC4 and newer)How to trigger change() in a angular form by a custom control without an inputUse map to show and hide components in Angular2Angular 4 - MS Edge issue with ngIf not updatingAngular Material 2 md-checkbox default doesn't work with reactive formsReplace two buttons with a toggle switchHide/Show checkbox fields depending on link (or checkbox) clickToggle button inside angular reactive formToggle switch not working inside angular reactive form

What about the virus in 12 Monkeys?

Infinite Abelian subgroup of infinite non Abelian group example

Assassin's bullet with mercury

Brothers & sisters

Could gravitational lensing be used to protect a spaceship from a laser?

In a spin, are both wings stalled?

Why are electrically insulating heatsinks so rare? Is it just cost?

Blender 2.8 I can't see vertices, edges or faces in edit mode

90's TV series where a boy goes to another dimension through portal near power lines

Why "Having chlorophyll without photosynthesis is actually very dangerous" and "like living with a bomb"?

What does it mean to describe someone as a butt steak?

Fully-Firstable Anagram Sets

Can a virus destroy the BIOS of a modern computer?

How could indestructible materials be used in power generation?

Why does Kotter return in Welcome Back Kotter?

Alternative to sending password over mail?

SSH "lag" in LAN on some machines, mixed distros

Modeling an IP Address

How much of data wrangling is a data scientist's job?

Combinations of multiple lists

Why can't we play rap on piano?

What is going on with Captain Marvel's blood colour?

Forgetting the musical notes while performing in concert

How can I tell someone that I want to be his or her friend?



Angular toggle switch issue on duplicated form group


Angular form checkbox default valueNested forms in Angular 2 JS (RC4 and newer)How to trigger change() in a angular form by a custom control without an inputUse map to show and hide components in Angular2Angular 4 - MS Edge issue with ngIf not updatingAngular Material 2 md-checkbox default doesn't work with reactive formsReplace two buttons with a toggle switchHide/Show checkbox fields depending on link (or checkbox) clickToggle button inside angular reactive formToggle switch not working inside angular reactive form






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








1















I have a form group that has several form controls within it, including a toggle switch. The toggle switch changes a boolean value in the model to true or false. Dependent upon the value, there is an *ngIf that handles if form controls are displayed or not. This all currently works fine, however I have a requirement to actually basically clone the entire form group, which I have achieved. However, the toggle switch only works on the first form group, and none of the rest. And actually, if I click the toggle on the others it actually toggles just the first one on and off...what am I missing here?



Here is how it looks, I actually clicked the 2nd toggle switch:
enter image description here



The model has this value:



advancedOptions: boolean;


The template is like so:



<div class="advancedOptions"> 
<div class="service-group jbh-toggle">
Advanced Options:
<label class="toggleLabel inline-block" for="inbond-freight">Hide</label>
<input class="jbh-toggle-checkbox ng-untouched ng-valid ng-dirty" #advancedOptions id="handlingUnitAdvancedOptionsToggle" type="checkbox"
(change)="handlingUnitAdvancedOptionsToggle(advancedOptions.checked)">
<label class="jbh-toggle-label" for="handlingUnitAdvancedOptionsToggle">
<span class="jbh-toggle-inner" id="span-toggleInner3"></span>
<span class="jbh-toggle-switch" id="span-toggleSwitch3"></span>
</label>
<label class="toggleLabel inline-block" for="handlingUnitAdvancedOptionsToggle">Show</label>
</div>
</div>


The *ngIf is simply:



<div *ngIf="advancedOptions"></div>


All the other controls work fine in the duplicated form group, except for the toggle switch.










share|improve this question






















  • Are you really duplicating the handlingUnitAdvancedOptionsToggle id?

    – Randy Casburn
    Mar 8 at 0:42











  • hmm yes...sounds like this could be part of the issue...but removing the id breaks the whole thing worse

    – sm1l3y
    Mar 8 at 0:48












  • You are also using the same local variable (advancedOptions) for each. That might also cause some issues based upon what handlingUnitAdvancedOptionsToggle() does with that variable.

    – Randy Casburn
    Mar 8 at 0:57











  • hmm can you think of an alternative? just wanting the toggle to hide a div dependent upon status

    – sm1l3y
    Mar 8 at 1:29






  • 1





    It seems, logically to me at least, that if you have say Adv Options 1, Adv Options 2, and Adv Options 3, and you want individual controls to control them each independent of one another, that you would use a component state variable for each one. As the state variable gets flipped, *ngIf activates for the corresponding Adv Options. But there are many ways to solve every issue.

    – Randy Casburn
    Mar 8 at 1:33


















1















I have a form group that has several form controls within it, including a toggle switch. The toggle switch changes a boolean value in the model to true or false. Dependent upon the value, there is an *ngIf that handles if form controls are displayed or not. This all currently works fine, however I have a requirement to actually basically clone the entire form group, which I have achieved. However, the toggle switch only works on the first form group, and none of the rest. And actually, if I click the toggle on the others it actually toggles just the first one on and off...what am I missing here?



Here is how it looks, I actually clicked the 2nd toggle switch:
enter image description here



The model has this value:



advancedOptions: boolean;


The template is like so:



<div class="advancedOptions"> 
<div class="service-group jbh-toggle">
Advanced Options:
<label class="toggleLabel inline-block" for="inbond-freight">Hide</label>
<input class="jbh-toggle-checkbox ng-untouched ng-valid ng-dirty" #advancedOptions id="handlingUnitAdvancedOptionsToggle" type="checkbox"
(change)="handlingUnitAdvancedOptionsToggle(advancedOptions.checked)">
<label class="jbh-toggle-label" for="handlingUnitAdvancedOptionsToggle">
<span class="jbh-toggle-inner" id="span-toggleInner3"></span>
<span class="jbh-toggle-switch" id="span-toggleSwitch3"></span>
</label>
<label class="toggleLabel inline-block" for="handlingUnitAdvancedOptionsToggle">Show</label>
</div>
</div>


The *ngIf is simply:



<div *ngIf="advancedOptions"></div>


All the other controls work fine in the duplicated form group, except for the toggle switch.










share|improve this question






















  • Are you really duplicating the handlingUnitAdvancedOptionsToggle id?

    – Randy Casburn
    Mar 8 at 0:42











  • hmm yes...sounds like this could be part of the issue...but removing the id breaks the whole thing worse

    – sm1l3y
    Mar 8 at 0:48












  • You are also using the same local variable (advancedOptions) for each. That might also cause some issues based upon what handlingUnitAdvancedOptionsToggle() does with that variable.

    – Randy Casburn
    Mar 8 at 0:57











  • hmm can you think of an alternative? just wanting the toggle to hide a div dependent upon status

    – sm1l3y
    Mar 8 at 1:29






  • 1





    It seems, logically to me at least, that if you have say Adv Options 1, Adv Options 2, and Adv Options 3, and you want individual controls to control them each independent of one another, that you would use a component state variable for each one. As the state variable gets flipped, *ngIf activates for the corresponding Adv Options. But there are many ways to solve every issue.

    – Randy Casburn
    Mar 8 at 1:33














1












1








1


1






I have a form group that has several form controls within it, including a toggle switch. The toggle switch changes a boolean value in the model to true or false. Dependent upon the value, there is an *ngIf that handles if form controls are displayed or not. This all currently works fine, however I have a requirement to actually basically clone the entire form group, which I have achieved. However, the toggle switch only works on the first form group, and none of the rest. And actually, if I click the toggle on the others it actually toggles just the first one on and off...what am I missing here?



Here is how it looks, I actually clicked the 2nd toggle switch:
enter image description here



The model has this value:



advancedOptions: boolean;


The template is like so:



<div class="advancedOptions"> 
<div class="service-group jbh-toggle">
Advanced Options:
<label class="toggleLabel inline-block" for="inbond-freight">Hide</label>
<input class="jbh-toggle-checkbox ng-untouched ng-valid ng-dirty" #advancedOptions id="handlingUnitAdvancedOptionsToggle" type="checkbox"
(change)="handlingUnitAdvancedOptionsToggle(advancedOptions.checked)">
<label class="jbh-toggle-label" for="handlingUnitAdvancedOptionsToggle">
<span class="jbh-toggle-inner" id="span-toggleInner3"></span>
<span class="jbh-toggle-switch" id="span-toggleSwitch3"></span>
</label>
<label class="toggleLabel inline-block" for="handlingUnitAdvancedOptionsToggle">Show</label>
</div>
</div>


The *ngIf is simply:



<div *ngIf="advancedOptions"></div>


All the other controls work fine in the duplicated form group, except for the toggle switch.










share|improve this question














I have a form group that has several form controls within it, including a toggle switch. The toggle switch changes a boolean value in the model to true or false. Dependent upon the value, there is an *ngIf that handles if form controls are displayed or not. This all currently works fine, however I have a requirement to actually basically clone the entire form group, which I have achieved. However, the toggle switch only works on the first form group, and none of the rest. And actually, if I click the toggle on the others it actually toggles just the first one on and off...what am I missing here?



Here is how it looks, I actually clicked the 2nd toggle switch:
enter image description here



The model has this value:



advancedOptions: boolean;


The template is like so:



<div class="advancedOptions"> 
<div class="service-group jbh-toggle">
Advanced Options:
<label class="toggleLabel inline-block" for="inbond-freight">Hide</label>
<input class="jbh-toggle-checkbox ng-untouched ng-valid ng-dirty" #advancedOptions id="handlingUnitAdvancedOptionsToggle" type="checkbox"
(change)="handlingUnitAdvancedOptionsToggle(advancedOptions.checked)">
<label class="jbh-toggle-label" for="handlingUnitAdvancedOptionsToggle">
<span class="jbh-toggle-inner" id="span-toggleInner3"></span>
<span class="jbh-toggle-switch" id="span-toggleSwitch3"></span>
</label>
<label class="toggleLabel inline-block" for="handlingUnitAdvancedOptionsToggle">Show</label>
</div>
</div>


The *ngIf is simply:



<div *ngIf="advancedOptions"></div>


All the other controls work fine in the duplicated form group, except for the toggle switch.







javascript angular typescript






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Mar 8 at 0:22









sm1l3ysm1l3y

138110




138110












  • Are you really duplicating the handlingUnitAdvancedOptionsToggle id?

    – Randy Casburn
    Mar 8 at 0:42











  • hmm yes...sounds like this could be part of the issue...but removing the id breaks the whole thing worse

    – sm1l3y
    Mar 8 at 0:48












  • You are also using the same local variable (advancedOptions) for each. That might also cause some issues based upon what handlingUnitAdvancedOptionsToggle() does with that variable.

    – Randy Casburn
    Mar 8 at 0:57











  • hmm can you think of an alternative? just wanting the toggle to hide a div dependent upon status

    – sm1l3y
    Mar 8 at 1:29






  • 1





    It seems, logically to me at least, that if you have say Adv Options 1, Adv Options 2, and Adv Options 3, and you want individual controls to control them each independent of one another, that you would use a component state variable for each one. As the state variable gets flipped, *ngIf activates for the corresponding Adv Options. But there are many ways to solve every issue.

    – Randy Casburn
    Mar 8 at 1:33


















  • Are you really duplicating the handlingUnitAdvancedOptionsToggle id?

    – Randy Casburn
    Mar 8 at 0:42











  • hmm yes...sounds like this could be part of the issue...but removing the id breaks the whole thing worse

    – sm1l3y
    Mar 8 at 0:48












  • You are also using the same local variable (advancedOptions) for each. That might also cause some issues based upon what handlingUnitAdvancedOptionsToggle() does with that variable.

    – Randy Casburn
    Mar 8 at 0:57











  • hmm can you think of an alternative? just wanting the toggle to hide a div dependent upon status

    – sm1l3y
    Mar 8 at 1:29






  • 1





    It seems, logically to me at least, that if you have say Adv Options 1, Adv Options 2, and Adv Options 3, and you want individual controls to control them each independent of one another, that you would use a component state variable for each one. As the state variable gets flipped, *ngIf activates for the corresponding Adv Options. But there are many ways to solve every issue.

    – Randy Casburn
    Mar 8 at 1:33

















Are you really duplicating the handlingUnitAdvancedOptionsToggle id?

– Randy Casburn
Mar 8 at 0:42





Are you really duplicating the handlingUnitAdvancedOptionsToggle id?

– Randy Casburn
Mar 8 at 0:42













hmm yes...sounds like this could be part of the issue...but removing the id breaks the whole thing worse

– sm1l3y
Mar 8 at 0:48






hmm yes...sounds like this could be part of the issue...but removing the id breaks the whole thing worse

– sm1l3y
Mar 8 at 0:48














You are also using the same local variable (advancedOptions) for each. That might also cause some issues based upon what handlingUnitAdvancedOptionsToggle() does with that variable.

– Randy Casburn
Mar 8 at 0:57





You are also using the same local variable (advancedOptions) for each. That might also cause some issues based upon what handlingUnitAdvancedOptionsToggle() does with that variable.

– Randy Casburn
Mar 8 at 0:57













hmm can you think of an alternative? just wanting the toggle to hide a div dependent upon status

– sm1l3y
Mar 8 at 1:29





hmm can you think of an alternative? just wanting the toggle to hide a div dependent upon status

– sm1l3y
Mar 8 at 1:29




1




1





It seems, logically to me at least, that if you have say Adv Options 1, Adv Options 2, and Adv Options 3, and you want individual controls to control them each independent of one another, that you would use a component state variable for each one. As the state variable gets flipped, *ngIf activates for the corresponding Adv Options. But there are many ways to solve every issue.

– Randy Casburn
Mar 8 at 1:33






It seems, logically to me at least, that if you have say Adv Options 1, Adv Options 2, and Adv Options 3, and you want individual controls to control them each independent of one another, that you would use a component state variable for each one. As the state variable gets flipped, *ngIf activates for the corresponding Adv Options. But there are many ways to solve every issue.

– Randy Casburn
Mar 8 at 1:33













1 Answer
1






active

oldest

votes


















0














You can use your formcontrol value of toggle switch like when it's value is true then you can show/hide like below
form.controls.default_checkbox.value != 1






share|improve this answer























  • That would work on a single toggle switch, but I am cloning the toggle and form group

    – sm1l3y
    Mar 8 at 14:12












Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55054944%2fangular-toggle-switch-issue-on-duplicated-form-group%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














You can use your formcontrol value of toggle switch like when it's value is true then you can show/hide like below
form.controls.default_checkbox.value != 1






share|improve this answer























  • That would work on a single toggle switch, but I am cloning the toggle and form group

    – sm1l3y
    Mar 8 at 14:12
















0














You can use your formcontrol value of toggle switch like when it's value is true then you can show/hide like below
form.controls.default_checkbox.value != 1






share|improve this answer























  • That would work on a single toggle switch, but I am cloning the toggle and form group

    – sm1l3y
    Mar 8 at 14:12














0












0








0







You can use your formcontrol value of toggle switch like when it's value is true then you can show/hide like below
form.controls.default_checkbox.value != 1






share|improve this answer













You can use your formcontrol value of toggle switch like when it's value is true then you can show/hide like below
form.controls.default_checkbox.value != 1







share|improve this answer












share|improve this answer



share|improve this answer










answered Mar 8 at 4:21









Er Abdul MemanEr Abdul Meman

1146




1146












  • That would work on a single toggle switch, but I am cloning the toggle and form group

    – sm1l3y
    Mar 8 at 14:12


















  • That would work on a single toggle switch, but I am cloning the toggle and form group

    – sm1l3y
    Mar 8 at 14:12

















That would work on a single toggle switch, but I am cloning the toggle and form group

– sm1l3y
Mar 8 at 14:12






That would work on a single toggle switch, but I am cloning the toggle and form group

– sm1l3y
Mar 8 at 14:12




















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55054944%2fangular-toggle-switch-issue-on-duplicated-form-group%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

1928 у кіно

Захаров Федір Захарович

Ель Греко