md-select option not selecting with objects.

[jt-helsinki]

Bug, feature request, or proposal:

Feature request/ bug.

What is the expected behavior?

Needs a "selected" attribute so the developer can specify the "selected" rule/logic.

What is the current behavior?

Option not being selected although the underlying model is populated.

What are the steps to reproduce?

Unable to select options using objects where some properties of the two objects differ yet primary key and Display value are the same. For example,

<md-option *ngFor="let user of Users" [value]="user">
    {{ user.name }}
</md-option>

The user may have one set of data inside the model yet only retrieve a subset of the properties to populate the select list. In this case, the options of the select do not select.

For such cases, it may be better to do something like:

<md-option *ngFor="let user of Users" [value]="user" [selected]="user.id === userId">
    {{ user.name }}
</md-option>

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

Using forms where objects are part of the underlying model. These objects are used as values of each .

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

Angular 2 latest.

Is there anything else we should know?

[da45]

same for me, selected is not working, I hope someone can answer us :)

[michaelwaihenya]

+1

[csabattilas]

+1

[mwamufiya]

There seem to be multiple issues reported for being able to specify which is the selected option. Has there been an official response on this yet?

[kara]

It seems like there is some confusion over how to use the select. md-select is a custom form control, so you'd use it like you would a native select with any of the core form directives.

Example:

<md-select placeholder="Food" [(ngModel)]="food">
   <md-option *ngFor="let food of foods" [value]="food"> {{ food.name }} </md-option>
</md-select>

Adding support for the selected attribute in addition to the existing mechanism would be duplicative and probably cause value conflicts. There should only be one source of truth for the select's value, and currently that is the form directive on the select.

Example plunker for reactive version:
http://plnkr.co/edit/RdsvzIO4IXeHRZGJHY2v?p=preview

You can find the documentation for select here. It should be pushed to the formal docs site with the next release.

In terms of selecting objects, currently the value comparison is by object reference. This does work (as you can see in the plunker above), but we do not perform deep checking that object properties are equal so the identities must be the same.

For the case where you might want to track options by some ID or comparator (instead of reference), it would make the most sense to make our solution parallel to what's happening in Angular core with 'compareWith'. I've created an issue to mirror the behavior in Material here.

[jt-helsinki]

@kara nice one. thanks for the update. the 'compareWith' will be a nice solution. cheers

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}