拨动开关在角度反应形式内不起作用答案

【问题标题】：Toggle switch not working inside angular reactive form拨动开关在角度反应形式内不起作用
【发布时间】：2019-05-26 00:58:42
【问题描述】：

在我的 Angular 6 应用程序中，我使用的是 Angular 反应形式，它在 formarray 内有一个三状态切换开关。

具有三种状态切换的 HTML：

      <div class="switch-toggle switch-3 switch-candy">
        <ng-container #buttonIcon *ngFor="let option of options" >
          <input 
            type="radio" 
            formControlName="state"
            [id]="option"
            [value]="option" />
          <label 
            [attr.for]="option">
            {{option}}
          </label>
        </ng-container><a></a>
      </div>

工作堆栈闪电战：

https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-kqhsvy

请点击以上链接中的add 按钮查看输入。

例如..，单击添加按钮三次，因此添加了三行，这里第一行切换开关单独工作，其余行的切换不工作..即使切换是在第二行或第三行进行的，也只有第一行行已更改..

请帮助我为每一行设置唯一的切换开关，并分别检索每一行中的切换值..

【问题讨论】：

标签： javascript angular typescript toggle angular-reactive-forms

【解决方案1】：

这是因为你所有的标签和输入的 id 都是一样的。把html改成

<div class="switch-toggle switch-3 switch-candy">
  <ng-container #buttonIcon *ngFor="let option of options" >
    <input 
      type="radio" 
      formControlName="state"
      [id]="option+i"
      [value]="option" />
    <label 
      [attr.for]="option+i">
      {{option}}
    </label>
  </ng-container><a></a>
</div>

【讨论】：