javascript - Angular react 形式内的切换按钮

Question

在我的 Angular react 形式中，我尝试使用三态切换开关，我已在链接中单独尝试了三态切换

三态切换 stackblitz: https://stackblitz.com/edit/angular-6-template-driven-form-validation-gh1dj1

我需要在 formarray 内的每一行响应式(Reactive)表单内使用相同的 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> 

但我无法达到结果。

响应式(Reactive) stackblitz: https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-yqraay

请点击第二个 stackblitz 中的添加按钮查看结果。在 app.component.css 中添加了 css..

请帮助我将第一个 stackblitz 中的三状态切换开关实现为第二个 stackblitz 中的 react 形式，并且需要获取所选切换的值。

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>

---

Here's a Working Sample StackBlitz for your ref.

---

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