Error when using object values in ng-option with reactive forms

[wkiril]

Expected behaviour

It should be possible to use ng-option component with an object in [value] using the reactive forms

Actual behaviour

https://plnkr.co/edit/m0oMVG6uvfHKp5ai3uSL?p=preview

Here's the error
Cannot read property 'indexOf' of undefined
at ItemsList.resolveNested (ng-select.js:1207)
at ItemsList.mapItem (ng-select.js:1223)
at select (ng-select.js:2110)
at NgSelectComponent._handleWriteValue (ng-select.js:2125)
at NgSelectComponent.writeValue (ng-select.js:1874)
at setUpControl (forms.js:2300)
at FormGroupDirective.addControl (forms.js:6659)
at FormControlName._setUpControl (forms.js:7309)
at FormControlName.ngOnChanges (forms.js:7222)
at checkAndUpdateDirectiveInline (core.js:12396)

More Info

ng-select version: 0.35.0

browser: Chrome

reproducible in demo page: NO

[anjmao]

Hi @wkiril
If you pass value as object you need to add bindLabel because internally ng-select should know how to resolve your [value]="city" label (required for search so on)

<ng-select 
          placeholder="Select city"
          bindLabel="name"
          formControlName="city">
          <ng-option
            *ngFor="let city of cities" 
            [value]="city">{{ city.name }}
         </ng-option>
</ng-select>

I see that it would be good to add validation for inputs so end user can better see that is required at which case.

[wkiril]

can't the value inside the ng-option tags be used as label? my use case is a little bit different:

<ng-select formControlName="city">
    <ng-option 
        *ngFor="let city of cities" 
        [value]="city"
    >{{ city.name }}</ng-option>
    <ng-option 
        *ngIf="form.value.city === 'custom'" 
        [value]="'custom'"
    >Custom city</ng-option>
    <ng-template ng-footer-tmp>
        <a (click)="openCustomCityModal()">Custom city</a>
    </ng-template>
</ng-select>

so the values are different - an object and a simple string. it could be done with a normal select but I need the footer template

[wkiril]

I also noticed that using bindLabel without [items] (as in your example) doesn't show the label

[anjmao]

You are correct, option innerHTML can be used as label and bindLabel can be ignored. I looked at the code and it needs to be refactored a bit to support this case.

Implementation note:
https://github.com/ng-select/ng-select/blob/master/src/ng-select/ng-select.component.ts#L462 Do not try to resolve nested value label if label is already set.

[anjmao]

@wkiril I added example b93b25a It is not possible to use objects and primitive values, when using ng-option you should use primitive [value] when it is working fine.
In your example instead of passing whole city you can pass only city id.

[emmanueldaher]

I got the same problem, i'm also using ng-option passing an object as [value].
I'll pass object.id as [value] temporarily, as suggested by @anjmao.

@wkiril is version 0.35.0 available on npm?

[anjmao]

@emmanueldaher Yes it is available.
@wkiril If you need to bind object you pass items to [items] input and use custom ng-option template.

[wkiril]

yes, thanks @anjmao for the quick replies. I know the workarounds

[wkiril]

there's still an inconsistency using a simple string ng-option and reactive forms: https://stackblitz.com/edit/ng-select-xsyqyl

the initial value is displayed instead of the label from the ng-option innerHTML

[wkiril]

this is also observable in the default demo page https://ng-select.github.io/ng-select#/forms

[anjmao]

@wkiril Thanks for good example on inconsistency 👍

[wkiril]

thank you for the fix. however now the html doesn't render on the Basic select in Reactive forms demo page - https://ng-select.github.io/ng-select#/forms

[kuncevic]

got an error TypeError: key is undefined adding bindLabel as per #414 (comment) solved the problem