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

[naveedahmed1]

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.

[crisbeto]

Couldn't you get the same result by assigning the entire object as the value and then only taking the field that you want before firing off the request?

[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.

[naveedahmed1]

One more thing, isn't it a more common case that form controls usually return a single value and not objects.

For example a field to select product, with autocomplete, would normally have list with values like [{id:1, name:'Product A'}, {id:2, name:'Product B'}] but we would normally want to port the product.id to the server when form is submitted.

Similarly a field to select user, with autocomplete, would normally have list with values like [{id:1, name:'User A'}, {id:2, name:'User B'}] but we would normally want to port the user.id to the server when form is submitted.

[crisbeto]

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.

The problem with this is that now the option will have two fields for the value, making it confusing for somebody that isn't familiar with the component.

[naveedahmed1]

What if we have a saveWith function similar to displayWith:

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" [saveWith]="saveFn">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option.name}}
      </mat-option>
    </mat-autocomplete>

Or may be for mat-option, we could be able to specify display label:

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option"  [label]="option">
        {{option.name}}
      </mat-option>
    </mat-autocomplete>

By the way, I wonder why the options list behavior in autocomplete isn't similar to the options list in select list i.e. where when an option is selected, the option label is displayed for the user and the value of the option is saved in form control. If similar behavior could be implemented for autocomplete, this would be the best solution, I think.

[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.

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[muneebkq]

any update on this request