角度反应形式内的切换按钮

Question

在我的角度电抗形式中，我尝试使用三态切换开关，为此我在链接中分别尝试了三态切换

三种状态切换Stackblitz： https ：//stackblitz.com/edit/angular-6-template-driven-form-validation-gh1dj1

我需要在formarray内的每一行上使用相同的CSS来实现相同的反应形式 。

为此，我尝试了相同的html和css并以formcontrolname给出，

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

但是我无法达到结果。

反应形式stackblitz： https ://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-yqraay

请单击第二个堆栈闪电中的添加按钮以查看结果。在app.component.css添加了CSS。

请帮助我像在第一个stackblitz中那样将三状态切换开关实现为第二个stackblitz中的反应形式，并需要获取选定切换的值。

Answer 1

只需在输入标签上添加[id] ，然后在标签标签上添加[attr.for] 。 像这样：

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

---

这是供您参考的工作样本StackBlitz 。

---

感谢A.Winnen对使用先前方法的性能影响的评论。

Answer 2

反应性组件中的options数组与您实现的三向开关不同。 实际组件中的一个没有id 。

[
  "on",
  "na",
  "off"
]

您仍然可以这样使用：

<ng-container #buttonIcon *ngFor="let option of options" >
  <input type="radio" formControlName="state" [checked]="value === option"
               [value]="option" />
        <label (click)="onSelectionChange(option)"  for="{{option}}"> 
            {{option}} //**refer the object as the id filed is missing**
        </label>

第二个区别是，您在反应组件中缺少onSelectionChange函数

Answer 3

这是一个供您参考的stackblitz演示。 https://stackblitz.com/edit/angular-szsw3k