时间戳

首页 > 解决方案 > 重复表单组上的角度切换开关问题

javascript - 重复表单组上的角度切换开关问题

问题描述

我有一个表单组，其中包含多个表单控件，包括一个拨动开关。切换开关将模型中的布尔值更改为真或假。根据该值，有一个 *ngIf 来处理是否显示表单控件。这一切目前都很好，但是我需要实际上基本上克隆整个表单组，我已经实现了。但是，切换开关仅适用于第一个表单组，其余均无效。实际上，如果我单击其他开关上的开关，它实际上只会打开和关闭第一个开关......我在这里错过了什么？

这是它的外观，我实际上点击了第二个切换开关： 在此处输入图像描述

该模型具有以下值：

advancedOptions: boolean;

模板是这样的：

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

*ngIf 很简单：

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

除切换开关外，所有其他控件在重复的表单组中都可以正常工作。

标签： javascriptangulartypescript

解决方案

您可以使用切换开关的 formcontrol 值，例如当它的值为 true 时，您可以如下所示显示/隐藏 form.controls.default_checkbox.value != 1

推荐阅读