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

user_5836169 0
Viewed 15701

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

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

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

I have tired it as

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

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() has the data

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

Please help....!

angular-ngselect angular-reactive-forms angular6
3 Answers

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

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 }" />
user_41561420

There is an other way to do that without the ngModel : 

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

My dropdown item was not getting selected on clicking the item in the dropdown, it was only getting checked on clicking on the checkbox. This worked for me thanks

user_142986970
Related