Support for setting option's control value to be a property of object and option's display value to be another property of the object

I know that if we want the option’s control value (what is saved in the form) to be different than the option’s display value (what is displayed in the text field), we’ll need to set the displayWith property on our autocomplete element. as explained here:

https://material.angular.io/components/autocomplete/overview#setting-separate-control-and-display-values

Suppose we have a user object like { id: 1, name: 'Abc' }.

What if we want the option’s control value (what is saved in the form) to be user.id and option’s display value (what is displayed in the actual text field) to be user.name?

In my case I want to display a list of users in autocomplete options and when user selects a user, I want to display the selected user name on the user screen but when the form is submitted, I just want user.id to be posted to the server not user.name and not complete user object.

[naveedahmed1]

Yes, I know that’s possible, but may we can have something like displayWith that allow specifying which value should be saved for form control, to avoid this step of assigning the entire object as the value and then only taking the specific property of object we want before firing off the request, may be something saveValue.

This would be really helpful for apps where we have dynamic forms, and where we just pass the model and the post url and rest is handles by the dynamic form component.

[mrmokwa]

+1

This issue have already been asked before a couple of times, but didn’t get much attention (the first reference I saw was about to get 2 years old).

For me this comment from @kdubious, summarize the problem: https://github.com/angular/material2/issues/8436#issuecomment-353203199

I’m getting tripped up on implementing what I think is a fairly standard use case for a combobox (autocomplete).

For now, all we have is this jerry-rig, which solves the problem. https://stackblitz.com/edit/angular-autocomplete-array-with-formcontrol-id-1?file=app%2Fautocomplete-display-example.ts

I would recommend avoiding use Autocomplete for this scenario, and use Selector componente instead. … It’s what I had to do unfortunatelly.