Currently, I have a form group that contains multiple form controls, including a toggle switch. This switch is responsible for toggling a boolean value in the model between true and false. Depending on this value, an *ngIf statement determines whether certain form controls are visible or not. Everything seems to be functioning properly at the moment. However, I recently encountered a requirement to essentially duplicate the entire form group. While I managed to do so successfully, I ran into an issue with the toggle switch functionality. It appears that the toggle switch only works for the original form group and not for any of the duplicated ones. Moreover, when attempting to toggle switches in the duplicates, it ends up controlling the first one instead. Can anyone help me identify what might be causing this inconsistency?
A visual representation of the issue can be seen in the following image, where I attempted to click the second toggle switch: https://i.sstatic.net/KpFUP.png
The model features the following attribute:
advancedOptions: boolean;
The template code is structured as follows:
<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 conditional rendering using *ngIf is simply:
<div *ngIf="advancedOptions"></div>
All other form controls within the duplicated form group appear to be working correctly, except for the toggle switch.