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;
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:
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 asked Mar 8 at 0:22
sm1l3ysm1l3y
138110
|
show 1 more comment
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:
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 asked Mar 8 at 0:22
sm1l3ysm1l3y
138110
Are you really duplicating thehandlingUnitAdvancedOptionsToggleid?
– 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 whathandlingUnitAdvancedOptionsToggle()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
|
show 1 more comment
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:
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 asked Mar 8 at 0:22
sm1l3ysm1l3y
138110
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:
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 javascript
angular typescript asked Mar 8 at 0:22
sm1l3ysm1l3y
138110
asked Mar 8 at 0:22
sm1l3ysm1l3y
138110
asked Mar 8 at 0:22
sm1l3ysm1l3y
138110
asked Mar 8 at 0:22
sm1l3ysm1l3y
138110
asked Mar 8 at 0:22
sm1l3ysm1l3y
138110
138110
Are you really duplicating thehandlingUnitAdvancedOptionsToggleid?
– 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 whathandlingUnitAdvancedOptionsToggle()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
|
show 1 more comment
Are you really duplicating thehandlingUnitAdvancedOptionsToggleid?
– 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 whathandlingUnitAdvancedOptionsToggle()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
|
show 1 more comment
1 Answer
1
active
oldest
votes
You can use your formcontrol value of toggle switch like when it's value is true then you can show/hide like belowform.controls.default_checkbox.value != 1
answered Mar 8 at 4:21
Er Abdul MemanEr Abdul Meman
1146
That would work on a single toggle switch, but I am cloning the toggle and form group
– sm1l3y
Mar 8 at 14:12
add a comment |
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
You can use your formcontrol value of toggle switch like when it's value is true then you can show/hide like belowform.controls.default_checkbox.value != 1
answered Mar 8 at 4:21
Er Abdul MemanEr Abdul Meman
1146
That would work on a single toggle switch, but I am cloning the toggle and form group
– sm1l3y
Mar 8 at 14:12
add a comment |
You can use your formcontrol value of toggle switch like when it's value is true then you can show/hide like belowform.controls.default_checkbox.value != 1
answered Mar 8 at 4:21
Er Abdul MemanEr Abdul Meman
1146
That would work on a single toggle switch, but I am cloning the toggle and form group
– sm1l3y
Mar 8 at 14:12
add a comment |
You can use your formcontrol value of toggle switch like when it's value is true then you can show/hide like belowform.controls.default_checkbox.value != 1
answered Mar 8 at 4:21
Er Abdul MemanEr Abdul Meman
1146
You can use your formcontrol value of toggle switch like when it's value is true then you can show/hide like belowform.controls.default_checkbox.value != 1
answered Mar 8 at 4:21
Er Abdul MemanEr Abdul Meman
1146
answered Mar 8 at 4:21
Er Abdul MemanEr Abdul Meman
1146
answered Mar 8 at 4:21
Er Abdul MemanEr Abdul Meman
1146
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
Are you really duplicating the
handlingUnitAdvancedOptionsToggleid?– 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 whathandlingUnitAdvancedOptionsToggle()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