角反应形式内的切换按钮答案

【问题标题】：Toggle button inside angular reactive form角反应形式内的切换按钮
【发布时间】：2019-05-25 17:27:06
【问题描述】：

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

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

我需要在 reactive form 内的每一行上用相同的 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。

请帮助我将第一个堆栈闪电战中的三态切换开关实现为第二个堆栈闪电战中的反应形式，并且需要获取所选切换的值..

【问题讨论】：

我已经在研究它了。您的三向开关似乎在响应式表单中不起作用。
是的，你是对的，它不能在反应形式中工作。请帮助我在反应形式中包含三态开关。

标签： javascript angular typescript angular6 angular-reactive-forms

【解决方案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 函数

【讨论】：

【解决方案2】：

只需在输入标签中添加[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 就使用前一种方法对性能的影响提出了 cmets。

【讨论】：

抱歉错过了一件事。默认情况下，所有行都需要选择 na。
推送新的FormGroup 时，只需在addCreds 方法中添加state: 'na'
我现在只能在手机上办理登机手续，所以我发现我需要的东西没有问题。如果有任何疑问会让你知道，我会接受你的回答。。
@undefined，没问题。很高兴我能帮助你。 :)
@SiddAjmera，每次我在 ReactiveForm 中看到 (ngModelChange) 我都会发疯 :)

【解决方案3】：

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

【讨论】：