valor-software / ng2-select

Angular based replacement for select boxes
http://valor-software.github.io/ng2-select/
MIT License
675 stars 587 forks source link

multiselect: options selected by initData can be selected again #384

Open WardBeullens opened 7 years ago

WardBeullens commented 7 years ago

I edited the demo project (because it does not work , it does not show the preseleced option "Athens") a bit to get this.

<ng-select [data]="value"
       [initData]="initData"
       [multiple]="true"
       [items]="items"
       [disabled]="disabled"
       (data)="refreshValue($event)"
       (selected)="selected($event)"
       (removed)="removed($event)"
       placeholder="No city selected"></ng-select>

In the component I added

initData = ["Athens"];

Then the "Athens" option is preselected , however "Athens" is still in the dropdown and I can select it again. Now it is shown twice.

I noticed that the "Athens" option is NOT displayed in in the dropdown (as it should be) untill the first letter is typed.

WardBeullens commented 7 years ago

Also, what does the [data] attribute do? I thought that it was a typo and that i could replace it with [initData], however if I do this I get errors.

lacma2011 commented 7 years ago

First, remove this line: [data]="value" Because data is already an event handler (data), and in rc5 having the former won't work and will cause an error. So, you are correct to use [initData]="initData" to pre-select values, and the example documention is wrong.

Secondly, for populating that value initData, this worked for me:

initData = [ { id: 0, text: "Athens"} ]

Likewise, your items array should look like: items = [ { id: 0, text: "Athens"}, { id: 1, text: "Copenhagen"}, { id: 2, text: "Memphis"}, { id: 10, text: "New York"} ]

... id is unique and the value(s) you want the form to submit. Since you selected multiple=true, you can have more than one initData:

initData = [ { id: 0, text: "Athens"}, { id: 10, text: "New York"} ]

WardBeullens commented 7 years ago

I also managed to pre-select values, but the problem is that the pre-selected values can be selected again. (If you do so they are shown twice). Doing initData = [{ id: 0, text: "Athens"}] and the same for items did not change that.

monica11 commented 7 years ago

@WardBeullens @lacma2011 Are you able to fix this problem? I am also stuck at the same place. I am able to get the preselected data but changing that doesn't reflect in the options.