feat(md-select) - enable to clear the value (unselect)

[jefersonestevo]

Bug, feature request, or proposal:

feat

What is the expected behavior?

In a md-select, let the user create a option to "unselect" the item value.

What is the current behavior?

When we add a empty option with value="" (ng-value="undefined" or ng-value="null"), the placeholder act as if we've selected an option

What are the steps to reproduce?

After selecting one option on md-select, try to "unselect" and revert it to the "empty" state

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd
http://plnkr.co/edit/e8Qoaq7M1ubiWHpVKctu?p=preview

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

Some non-required select on my applications need to let the user "unselect" the options

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

@angular/material: 2.0.0-beta.1

Is there anything else we should know?

[kara]

We do want to add easy de-select functionality; it's on the list! In the meantime, you can get it to work with form reset:

<md-select placeholder="My Option" [(ngModel)]="opt2" name="opt2" #model="ngModel">
      <md-option (click)="model.reset()"></md-option>
      <md-option value="item1">Item 1</md-option>
      <md-option value="item2">Item 2</md-option>
</md-select>

I've updated your plunker with an example.

[jefersonestevo]

@kara thanks for the workaround. It worked like a charm. The only problem with this approach is that, when I have an undefined field in my ts file (not null), it assumes that the "empty" option is the one selected and the page is opened as if I had already selected an option.

I've updated my plnkr with the above description.

But for now, I can work it out by setting an out of domain value to the "empty" option. Thanks

[niveo]

Compare two objects don't work.

food = {value: 'steak-0', viewValue: 'Steak'};

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

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

[casni14]

I found that you can use (change)="model.reset" then you avoid creating an empty option field. Like this:

<md-select placeholder="My Option" [(ngModel)]="opt2" name="opt2" #model="ngModel" (change)="model.reset()">
      <md-option value="item1">Item 1</md-option>
      <md-option value="item2">Item 2</md-option>
</md-select>

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