angular 反应形式内的切换按钮

Question

在我的 angular 反应形式中，我正在尝试使用 三态拨动开关 ，为此我在 link[ 中分别尝试了三态开关=16=]

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

而且我需要在 反应形式 中的每一行上使用相同的 css 在 formarray 中实现相同的

为此我尝试了相同的 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

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

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

Answer 1

反应组件中的选项数组与您实现的 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 2

只需将 [id] 添加到 input 标签，将 [attr.for] 添加到 label 标签。像这样：

<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 对使用先前方法的性能影响的评论。

Answer 3

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

angular 反应形式内的切换按钮

Toggle button inside angular reactive form

javascript

typescript

angular

angular-reactive-forms

angular6