角形反应式内的按钮

Question

在我的角度反应形式中，我尝试使用三状态切换开关，我已经在链接中分别尝试了三个状态开关。

三状态切换堆栈闪电战： https://stackblitz.com/edit/angular-6-template-driven-form-validation-gh1dj1

我需要在表单数组中的每一行实现同样的css，在反应表单中实现相同的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>

这是一个供您参考的Working Sample StackBlitz。

感谢A.Winnen对使用前一种方法的性能影响所作的评论。

Answer 2

您的反应性组件中的选项数组与您实现的3路开关不同。真实组件中的一个没有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