ng-select multiple drop down with grouping + reactive forms

ng-select is a good npm package to use when we want to allow user to select multiple items from the dropdown.
The help on the official page is not helpful much in case if we are using the ng-select with reactive forms in Angular.
Recently I’ve to use the grouping option with checkboxes and reactive forms.
Below is the code snippet which works for me.

Capture

Most of the code is same as in the help provided with the control

https://ng-select.github.io/ng-select#/multiselect-checkbox

The only problem is it’s not with reactive forms. So to make it work with the reactive forms the code change is to change the [ngModel] with [checked] in ng-template section. We also don’t need [(ngModel)] as it’s replaced by formContralName in reactive forms

Leave a comment