bug(md-option): MdOption value isn't working properly

[rafaelss95]

Bug, feature request, or proposal:

Bug.

What is the expected behavior?

What is the current behavior?

Let's see the example:

Array (for md-option's for):

foods = [
  {value: 'steak-0', viewValue: 'Steak'},
  {value: 'pizza-1', viewValue: 'Pizza'},
  {value: 'tacos-2', viewValue: 'Tacos'}
];

Template (note the [value]):

<form [formGroup]="formGroup">
  <md-select placeholder="Favorite food" formControlName="food">
    <md-option *ngFor="let food of foods" [value]="{'custom-key': food.value}">
      {{ food.viewValue }}
    </md-option>
  </md-select>
</form>

As you may have noticed, the value of md-option will be something like this:

"food": {
  "custom-key": "someVal"
}

The initialization of form control:

this.formGroup = this.formBuilder.group({
  food: [
    {'custom-key': 'tacos-2'}, // Note here
    [Validators.required]
  ]
});

The problem is that the md-option isn't recognizing this value {'custom-key': 'tacos-2'} (which one is correspondent to the third item of foods array), so it keeps blank.

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

http://plnkr.co/edit/9YNIj8RDUrVkq3VXbV0s?p=preview

1 - See the default value once you open the plunker;
2 - Select the third item in array "Tacos";
3 - Check that it's exact the same value as it was in the initialization;

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

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

Angular: 4.2.x
Material: Material2 Beta.7
OS: Linux
Typescript: 2.3.4

Is there anything else we should know?

[willshowell]

I'm not sure I understand what you're after here. The initial value of the form is,

{custom-key: 'tacos-2'}

But your food options are,

{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'}

Of course the select won't find equality in that list...

Maybe you were trying to do this? http://plnkr.co/edit/w8dc3j8SD0P4bVXqAgjB?p=preview

Or maybe you're looking for the ability to do a custom compare, for which there is an issue #2785

[rafaelss95]

@willshowell I think you didn't understand the issue...

Take a look on the following statement:

<md-option *ngFor="let food of foods" [value]="{'custom-key': food.value}">

In other words, it'll be translated to something like this:

<option value="{ 'custom-key': 'steak-0' }">Steak</option>
<option value="{ 'custom-key': 'pizza-1' }">Pizza</option>
<option value="{ 'custom-key': 'tacos-2' }">Tacos</option>

So, since I have the initial value {'custom-key': 'tacos-2'}, which is exactly the same as the third option (in template), it should bind automatically to, of course, the third item of list. Did you got it now?

[willshowell]

Oh right, thanks for clarifying! From the issue description in #2785:

Currently, md-select values are compared by object reference

So even though the initial value and the third option look the same, they are different objects, therefore the initial binding won't occur.

[jelbourn]

Closing based on @willshowell's explanation

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