Primeng: Dropdown setting whole object to model instead of value of value property after passing optionLabel property.

[dlinx]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
I want to bind object array to dropdown with properties text and value.

http://plnkr.co/edit/eQHimKPcLYusFQgwrFUh?p=preview

Current behavior

After setting optionLabel property, dropdown is setting selected option as model instead value key.

Expected behavior

It should set value property to model value.

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/eQHimKPcLYusFQgwrFUh?p=preview

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 4.2.6
  

• PrimeNG version: 4.3.0
  

• Browser: all
  

• Language: TypeScript 2.6

• Node (for AoT issues): node --version =

[cagataycivici]

This is expected, there is no optionValue prop so you'll get the object itself. When optionLabel is present, Dropdown uses whole object as the value.

[shamoh19]

@cagataycivici is there any option to set string to dropdown value instead of passing entire object?

[MaribelPC]

Same question

[ezra2310]

Yes. if have idea please post. Im also struggling with this issue

[christophs78]

Same issue.
When we compare to Angular Material (Select - Component):
https://material.angular.io/components/select/examples
This allows for explicit value binding.

To deliver some background:
There may be an REST-API which delivers categories to the client. This catagories have a identifier (e.g. number) and a label. (Category matches "brand" in your example.)
Then there is a second REST-API which delivers products ("cars" in your example) to the client. These products reference to a category via the identifier. When i update a product via REST-API i have to send the category-id to the sever.
There are always ways to work arround such issues. But i think it will make things easier and more flexible when dropdown supports explizit value binding.

[pejmanhadavi]

Just remove optionLabel prop and change "text" key to "label".