Question

我以无功角形式尝试使用三个状态切换开关，为此我在链接中分别尝试了三个状态切换

三态切换堆叠闪电战： 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>

但是我无法达到结果。

活动表格堆栈闪电： 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

电抗组件中的options数组与您实现的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

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

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

3 个答案: