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

Question

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

Can you provide some example of what you already tried to do ? This component seem to work like a normal component — xrobert35
– xrobert35, Commented Sep 19, 2018 at 18:14
It dont really have sens to use formControlName in the group or option template here. Why do you want to do that ? — xrobert35
– xrobert35, Commented Sep 22, 2018 at 15:40
By the way it's look like you don't really have understand how the template work but let-item$="item$"* in an option value or a group value that you must in your input with [ngModel] like in the exemple [ngModel]="item$.selected". So if your question is to know if you can use formControlName for you "input" for me it's no — xrobert35
– xrobert35, Commented Sep 22, 2018 at 15:48
Thanks for the reply, But my question is that if i can't use the formControlName then which directive would help me to achieve this kind of functionality. — Tanjore Raj
– Tanjore Raj, Commented Sep 23, 2018 at 5:47

xrobert35 · Accepted Answer · 2018-09-23 12:04:31Z

15

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

answered Sep 23, 2018 at 12:04

xrobert35

2,5761 gold badge19 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tanjore Raj Over a year ago

Thanks a lot....! xrobert. By using [ngModelOptions]="{ standalone : true }" to <ng-template> its working fine...

xrobert35 Over a year ago

No problem :). Like I told you, you should have write the error you get in the console in the question ;)

Sa Hagin · Accepted Answer · 2018-11-20 03:27:16Z

12

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

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

answered Nov 20, 2018 at 3:27

Sa Hagin

5421 gold badge7 silver badges20 bronze badges

Comments

anubhav sharma · Accepted Answer · 2022-08-06 05:47:22Z

0

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

answered Aug 6, 2022 at 5:47

anubhav sharma

1

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related