ng-select多选复选框，其反应形式为角度6 [英] ng-select multi select checkbox with reactive forms in angular 6

问题描述

请通过链接( https://ng-select.github.io/ng-select#/multiselect-checkbox )知道ng-select多选复选框.

Please go through the link(https://ng-select.github.io/ng-select#/multiselect-checkbox) to know ng-select multi select checkbox.

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

I am trying to use the ng-select "Group selects children" in my angular 6 application.

使用ng-select 组选择子项" 而不是模板驱动的表单时，我遇到了问题.

I am having problem using ng-select "Group selects children" with Reactive Forms instead of template driven forms.

我已经很累了

<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"

I have used the same data of the multiselect-checkbox-- [items]="userGroupsList"

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

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

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

So here can i use the [(ngModel)] as well as formControlName on the input how can i child elements are selected when the parent is select as in the example

请帮助......

推荐答案

要使它与formGroup一起使用，请执行以下操作:将ng-select上的formControlName保留在将要绑定到您的formGroup的ng-select上.

To make this work with formGroup : keep the formControlName on the ng-select who will be bind to your formGroup.

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

The problem is those input in the template. For me the best solution is to keep using ngModel like in the example. But you must make angular understand that is as nothing to do with the fromGroup so you can add the option standalone on it.

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

这篇关于ng-select多选复选框，其反应形式为角度6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！