ng-select multi select checkbox with reactive forms in angular 6

Question

请通过 link(https://ng-select.github.io/ng-select#/multiselect-checkbox) 了解 ng-select multi 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>

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

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

所以我可以在输入中使用 [(ngModel)] 和 formControlName 如何在父元素为 select 时对子元素进行 select 编辑 [=] 16=]

请帮忙....!

Answer 1

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

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

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

Answer 2

没有 ngModel 还有另一种方法可以做到这一点：

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

ng-select multi select checkbox with reactive forms in angular 6

ng-select multi select checkbox with reactive forms in angular 6

angular-ngselect

angular-reactive-forms

angular6