*reduce* need for displayWith function on mat-autocomplete

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

A simple way to display the selected autocomplete value in an input field.

What is the current behavior?

Currently when you setup an autocomplete and bind a [value] to the <mat-autocomplete>, the autocomplete displays the value UNLESS you assign a displayWith function. However, it makes no sense to me to default to showing the [value] since that is intended to be the behind-the-scenes value, not the displayValue. If we simply default to displaying the viewValue somehow, we would no longer need a displayWith function, and that would eliminate numerous other headaches reported in other issues on this forum.

What are the steps to reproduce?

Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.
Plunker starter (using on @master): https://goo.gl/uDmqyY
StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV

This proposal relies on an understanding of the typical autocomplete implementation e.g. here: https://plnkr.co/edit/W9vdWaGcoG90LKM8hHgI?p=preview

What is the use-case or motivation for changing an existing behavior?

displayWith function has numerous issues reported. For my purpose I see it as a potential blocker to generating dynamic forms in particular, for reasons i’m glad to detail if need be but I’ll spare at this time.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

i’m guessing the displayWith function was created in the first place to address a legitimate challenge. Namely, the autocomplete control needs a way to know what the displayValue is.

so in the demo example here:

<mat-form-field>
  <mat-select placeholder="State">
    <mat-option>None</mat-option>
    <mat-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</mat-option>
  </mat-select>
</mat-form-field>

the displayValue is state.name. Perhaps the new syntax that requires no displayValue would be like this:

<mat-form-field>
  <mat-select placeholder="State">
    <mat-option>None</mat-option>
    <mat-option *ngFor="let state of states" [value]="state.code" [dislayValue]="state.name"></mat-option>
  </mat-select>
</mat-form-field>

Such a design would continue to allow flexibility to assign the whole object or a particular field to the [value]…which is important to various use cases out there.

I don’t see any downside to eliminating the displayWith function as long as the viewValue is always shown I doubt people would care.

[kdubious]

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

The list data comes from a backend service in a Key-Value pair format. {id:1, name:"One"}) I want to bind id, and show name. I also want to filter when I type.

Is this supported today?

[sarora2073]

It’s supported today and you should be able to find sample working implementations elsewhere.