question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

md-select option not selecting with objects.

See original GitHub issue

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 <md-option>.

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

Angular 2 latest.

Is there anything else we should know?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:15
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
karacommented, Jan 24, 2017

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.

0reactions
angular-automatic-lock-bot[bot]commented, Sep 5, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular Material: md-select not showing selected option
If I inspect the md-select element, I can see the current user's name (let's say "John Doe") option has ng-selected="selected" ...
Read more >
How to set default selected option in md-select component ...
I want to set the default value from my md-select. ... value for exemple a string or a number it's work but when...
Read more >
Directives > mdSelect - Angular Material
Displays a select box, bound to an ng-model. ... When using a md-select to pick from a list of objects, it is important...
Read more >
Angular Select Boxes - W3Schools
AngularJS lets you create dropdown lists based on items in an array, or an object. Creating a Select Box Using ng-options. If you...
Read more >
Set Default option for md-select - CodePen
Nothing is shown in the option box without md-select-label. {{ n.value }}. When option is opened, selected option is not highlighted.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found