Topic: autocomplete displayValue to save different property in object [Reactive form approach]
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}
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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
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 mymdb-autocomplete, and myFormGroupis grabbing the[displayValue]rather than theidthat 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); }