how to properly bind loaded data to @ng-select, angular5

Question

Working with angular 5 and @ng-select I found some issues binding to previously selected data(in edit forms an such as)

Ngselect definition

 <ng-select
     [items]="contenedores$ | async"
     bindLabel="numero"
     bindValue="id"
     [(ngModel)]="embarqueContenedor.contenedor"> 
 </ng-select>

From the api I serialize the entity this way:

Received from server (json)(this is from the model)

{
    "id": 1,
    "numero": "dsvsd",
    "dimension": 234,
    "tipoContenedor": "324",
    "contenedorEmbarques": [],
    "text": "dsvsd",
    "value": 1,
    "name": "dsvsd",
    "createdAt": "2018-03-26T12:44:48-04:00",
    "updatedAt": "2018-03-26T12:44:48-04:00"
}

also I fill the ngselect with the items. I received from the server an array with objects like above(actually are the same entity so they are serialized the same way)

Following this doc and this one I tried to use both so I add some extra serialized fields(ummaped) and got the above json (text=name=numero,id=value). The problem is that is not working at all, still getting this error from ng-select.js each time I had a selected choice:

Binding object({"id":2,"numero":"dfdhdf","dimension":324234,"tipoContenedor":"324324","contenedorEmbarques":[],"text":"dfdhdf","name":"dfdhdf","value":2,"createdAt":"2018-03-26T12:44:48-04:00","updatedAt":"2018-03-26T12:44:48-04:00"}) with bindValue is not allowed.

The objects have the same and required attributes but still not work

Any help?

score 3 · Answer 1 · answered Jun 25 '19 at 08:36

when using ngModel with ng-select you have to pass id of the selected value as the following example:

<ng-select [items]="countries"
       bindLabel="nested.name"
       bindValue="nested.countryId"
       placeholder="Select value"
       [(ngModel)]="selectedCountryId">
</ng-select>

and for multiple selection pass array of ids.

score 2 · Answer 2 · answered Mar 26 '18 at 21:42

This line is how they are validating that your backing value is valid:

    const validateBinding = (item: any): boolean => {
        if (isObject(item) && this.bindValue) {
            this._console.warn(`Binding object(${JSON.stringify(item)}) with bindValue is not allowed.`);
            return false;
        }
        return true;
    };

That's where your error is coming from. I would guess that this line:

[(ngModel)]="embarqueContenedor.contenedor"

is messing it up, as the ngModel is pointing at an object instead of an id per bindValue.

Try:

[(ngModel)]="embarqueContenedor?.contenedor?.id"

Done but as expected only updates the id property on each select not the reference. so when I submit I'm just changing the id on database and that throws exception. Thanks anyway — Juan I. Morales Pestana, Mar 26 '18 at 22:22

score 0 · Answer 3 · answered Apr 12 '18 at 12:38

I have a simpler example, with an array of objects with this formatting

{name: 'en'}

ng-select declaration:

 <ng-select [items]="sourceLanguages"
                 [(ngModel)]="sourceSelection"
                 bindValue="name"
                 bindLabel="name"
                 [clearable]="false"
                 [searchable]="false"                  

      >

To get a default selection when over an array of strings arr = ['en', 'fr', 'de'], all i needed to input was this.sourceSelection = arr[1]; So very much along the lines of the answer above: to get a default selection you need to add a property not a whole object. It worked for me but your example is clearly more complex...

how to properly bind loaded data to @ng-select, angular5

3 Answers3