Question

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

我正在尝试在我的angular 6应用程序中使用ng-select “组选择子项” 。

我在使用ng-select “组选择子项” 而不是模板驱动的表单时遇到问题。

我已经很累了

<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-checkbox的相同数据-[items] =“ userGroupsList”

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

所以我可以在输入上使用[[ngModel）]和formControlName，如示例中那样选择父级时，如何选择子元素

请帮助......

Answer 1

要使它与formGroup一起使用：将ng-select上的formControlName保留在将绑定到您的formGroup的人上。

问题是模板中的那些输入。对我而言，最好的解决方案是像示例中一样继续使用ngModel。但是您必须使角度了解这与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多重选择复选框，其反应形式为角度6

2 个答案: