ng-select 多选复选框，具有 angular 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 Group selects children".

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

我在将 ng-select "Group selects children" 与反应式表单而不是模板驱动的表单一起使用时遇到问题.

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>

我使用了多选复选框的相同数据-- [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 进行此操作:将 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.但是您必须让 angular 明白这与 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 多选复选框，具有 angular 6 的反应形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！