Topic: autocomplete displayValue to save different property in object [Reactive form approach]

stokkup2313 priority asked 6 months ago

Hello, I have multiple different autocomplete input fields that i'm using in a FormGroup [Reactive form approach] to filter data from a server. The data returned by the filter method is an array of objects in which i'm using [displayValue] to specify which parameter of the object should be displayed.

Is it possible to have [displayValue] display one property of the object, while saving a different property of the object in my FormGroup?


My filtered data object:

{id: 164, name_company: 'Gildan', company_id: 100015}

is it possible to [displayValue] the name_company property AND saved the id property in my FormGroup?

Expected behavior: User selects option & displayValue shows name_company: 'Gildan' from my item object while the id property is saved in my FormGroup

{id: 164, name_company: 'Gildan', company_id: 100015}

stokkup2313 priority commented 6 months ago

Open to any suggestions/different approaches!

Arkadiusz Idzikowski staff commented 6 months ago

@stokkup2313 Did you try an approach similar to the one we presented in our documentation?

If you use a similar implementation it should work exactly as you described it, the component will still have information about the whole object, but only a specific property will be displayed.

stokkup2313 priority commented 6 months ago

@Arkadiusz Idzikowski Thank you for the clarification. I have a specific property being displayed, but is there a specific way (or suggestion) on how to save a different property in my FormGroup?

Right now, i'm using the (selected) event listener per your documentation in my mdb-autocomplete, and my FormGroup is grabbing the [displayValue] rather than the id that I want to save instead.

Arkadiusz Idzikowski staff commented 6 months ago

@stokkup2313 I tested this more closely and it looks like the component is returning an incorrect value. We will take a closer look at the component code to find the cause of the problem. As a workaround for now please use (selected) event to get information about selected option:

<mdb-autocomplete (selected)="onSelected($event)"> onSelected(event: any) { console.log('selected',; }

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 2.0.0
  • Device: iMac
  • Browser: Google Chrome
  • OS: MacOS Monterey
  • Provided sample code: No
  • Provided link: No