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

stokkup2313 priority asked 2 years 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?

Example:

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 2 years ago

Open to any suggestions/different approaches!


Arkadiusz Idzikowski staff commented 2 years ago

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

https://mdbootstrap.com/docs/b5/angular/forms/autocomplete/#section-display-value

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 2 years 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 2 years 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', event.option.value.id); }



This problem was fixed in v3.0.1. After upgrading to the new version, you may need to fix the value used as the filter function argument, because it may be an object or string (depending on your configuration). We updated the examples in the documentation:

https://mdbootstrap.com/docs/angular/forms/autocomplete/#section-display-value



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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