Angular ng-select ngModel 更改但 ng-select 未更新

Question

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, eg:

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!

Answer 1

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

Answer 2

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.

Answer 3

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

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