CODEWITHSUNDEEP
javascriptangulardata-bindingangular-ngselect
fox
fox

Reputation: 309

Angular ng-select ngModel changes but ng-select not updating

I have an ng-select looking like this:

<ng-select
        class="minimal"
        [items]="productGroupTags"
        [(ngModel)]="selectedProductGroup">
        <ng-template ng-option-tmp let-item="item">
          {{ item.nameI18n | multilanguagePipe }}
        </ng-template>
        <ng-template ng-label-tmp let-item="item">
          {{ item.nameI18n | multilanguagePipe }}
        </ng-template>
      </ng-select>

Where productGroupTags is an array of objects and selectedProductGroup is the selected object. It works, when using the ng-select to chose one of the items within productGroupTags, but doesn't work when setting selectedProductGroup from the outside, e.g.:

this.selectedProductGroup = this.productGroupTags[0];

I'm running angular 11.2.3 and ng-select 6.1

Any idea why this wouldn't work?

Thank you!

Upvotes: 0

Views: 2491

Answers (3)

Abdelwahid Oubaalla
Abdelwahid Oubaalla

Reputation: 865

I had the same issue, if you use ng-select inside ngForm you should add the attribute name="yourSelect" :

<ng-select
....
name="name2"
.... >

Upvotes: 1

fox
fox

Reputation: 309

Well, turns out I forgot to import the FormsModule. Without this, ngModel is not working, but also it does not throw an error.

Upvotes: 0

vsnikhilvs
vsnikhilvs

Reputation: 576

By default ng-select binds to default label property for display, and keeps whole object as selected value

Please check if you are binding an object into the ngModel, and if it is, do check if it of the right type.

Upvotes: 1

Related Questions