ng-select 多选复选框，具有角度 6 的反应形式答案

【问题标题】：ng-select multi select checkbox with reactive forms in angular 6ng-select 多选复选框，具有角度 6 的反应形式
【发布时间】：2019-02-23 23:26:14
【问题描述】：

请通过链接（https://ng-select.github.io/ng-select#/multiselect-checkbox）了解 ng-select 多选复选框。

我正在尝试在我的 Angular 6 应用程序中使用 ng-select "Group selects children"。

我在使用带有响应式表单而不是模板驱动表单的 ng-select "Group selects children" 时遇到问题。

我已经厌倦了

<ng-select
          [items]="userGroupsList"
          [multiple]="true"
          bindLabel="name"
          groupBy="gender"
          [selectableGroup]="true"
          [selectableGroupAsModel]="false"
          [closeOnSelect]="false"
          bindValue="id"
          formControlName="userGroups" placeholder="Select a user group">
            <ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
                <input id="item-{{index}}" type="checkbox" [(ngModel)]="" formControlName="userGroupParent"/> {{item.gender | uppercase}}
            </ng-template>
            <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
                <input id="item-{{index}}" type="checkbox" [(ngModel)]="" formControlName="userGroupChild"/> {{item.name}}
            </ng-template>
        </ng-select>

我使用了多选复选框的相同数据-- [items]="userGroupsList"

https://github.com/ng-select/ng-select/blob/master/demo/app/shared/data.service.ts -- getMockPeople() 有数据

所以在这里我可以在输入上使用 [(ngModel)] 以及 formControlName 如何在选择父元素时选择子元素，如示例中所示

请帮忙....！

【问题讨论】：

你能提供一些你已经尝试过的例子吗？该组件似乎像普通组件一样工作
我已经编辑了这个问题.. xrobert35。请帮忙..！
在此处的组或选项模板中使用 formControlName 确实没有意义。你为什么要这么做？
顺便说一句，您似乎并不真正了解模板的工作原理，而是 let-item$="item$"* 在选项值或组中您必须在输入中使用 [ngModel] 的值，例如示例 [ngModel]="item$.selected"。因此，如果您的问题是想知道您是否可以使用 formControlName 为我“输入”，那就是 no
感谢您的回复，但我的问题是，如果我不能使用 formControlName 那么哪个指令可以帮助我实现这种功能。

标签： angular6 angular-reactive-forms angular-ngselect

【解决方案1】：

要使这与 formGroup 一起工作：将 formControlName 保留在 ng-select 谁将绑定到您的 formGroup。

问题在于模板中的那些输入。对我来说，最好的解决方案是继续使用示例中的 ngModel。但是您必须让 Angular 理解这与 fromGroup 无关，因此您可以在其上添加独立选项。

<input id="item-{{index}}" type="checkbox" [(ngModel)]="item$.selected" [ngModelOptions]="{ standalone : true }" />

【讨论】：

非常感谢....！罗伯特。通过使用 [ngModelOptions]="{standalone : true }" 到其工作正常...
没问题:)。就像我告诉你的那样，你应该在问题中写下你在控制台中遇到的错误；）

【解决方案2】：

没有 ngModel 还有另一种方法：

<input id="item-{{index}}" type="checkbox" [checked]="item$.selected" />

【讨论】：