Material: mdSelect: validation bug

[MatiasKiuru]

Actual behavior:

• What is the issue? *
  md-select shows validation error (required) even when a value is selected

CodePen or Steps to reproduce the issue: *

• CodePen Demo which shows your issue : http://codepen.io/anon/pen/PzPwZO

EDIT: Here is a revised one:
http://codepen.io/anon/pen/beVdRb
Click the select and then click away without changing the value.

• Details: The demo works with rc4

Angular Versions: *

• Angular Version: 1.5
• Angular Material Version: 1.10-rc.5

Additional Information:

• Browser Type: Chrome
• Browser Version: 51.0.2704.79
• OS: Fedora 23
• Stack Traces:

[devversion]

I've noticed several issues with your markup:

• ng-value is not able to take an object
• Applying ng-show on the ng-messages div will always show the messages.

[MatiasKiuru]

My bad, here is a revised one:
http://codepen.io/anon/pen/beVdRb
Click the select and then click away without changing the value.

[HBO2]

+1

[saleem-git]

8669

Facing similar issue. Here is a code pen forked from Material design examples.

Actual behavior:*
Pre filled data in Select field is not accounted for, you are asked to select an item from the select field even though its already pre filled?

What is the expected behavior? 

If the select field is having data like in a edit view it should ask us to select a value

CodePen or Steps to reproduce the issue: *

http://codepen.io/geeky_saleem/pen/QEjjdg?editors=1111
Details: 
 Visit the link and open console under codepen, then click on Submit.
Console will be empty.
Now change the value of state from 'CA' to anything else, then click on submit.
You will now see a console message form submitted

Angular Versions: *

Angular Version:1.5.6
Angular Material Version:1.1.0-RC.5

Additional Information:

Browser Type: * Any browser
Browser Version: *Any browser
OS: *Any OS
Stack Traces:

[wojstu]

+1

[Kiougar]

Additional codepens reproducing the issue:

http://codepen.io/anon/pen/LZpyWQ

http://codepen.io/anon/pen/OXymNd

[bourdeaudhui]

Same here with Angular Version: 1.5 & Angular Material Version: 1.10-rc.5

[OliverJAsh]

Reproduced in 1.1.0-rc4, but 1.1.0-rc3 is fine.

[nirarazi]

+1

[matthiasarn]

I am facing the same problem with 1.1.0-rc.5

When I bind ng-value with an object it breaks ng-value="object". But when I use ng-value with a primitive like ng-value='object.property' it seems to work just fine:

this breaks:
<md-option ng-value="object" ng-repeat="object in objectSet"> {{ object.property}} </md-option>

1.1.0-rc4 seems fine in my case

[vibhanshuc]

+1

[Flygenring]

As far as I've seen it fail for objects (even if tracked by a property), which means it will never be valid even for completely correct and valid selections.

A solution could be to change the $isEmpty method (that was improved in https://github.com/angular/material/commit/da02ea2e) to something like this

  self.ngModel.$isEmpty = function($viewValue) {
    if(self.hashGetter) {
      return !self.options[self.hashGetter($viewValue)];
    }
    return !self.options[$viewValue];
  };

[dgomezs]

+1

[randallmeeker]

I made a codepen to report the same issue before noticing this issue, its nothing new, but wha the hay, probably better than adding a +1 http://codepen.io/randallmeeker/pen/mEVZEg

anyone got a work around that does not meddle with the core? The work around I'm using is replacing required with ngRequired and using the inputs model as a truthy value.

<md-select ng-model="data" ng-required="!data"> <md-option>...</md-option> </md-select>

[devversion]

I just investigated at the issue (again) and found the _actual_ problem.

• The required attribute is always adding a validator to the ngModelController, which will validate the $viewValue to be not empty.

Actually the validator calls the ngModelController.$isEmpty function, which will just check the value.

We overwrite the $isEmpty method inside of the select component, and just check for the value being present as an option.

The way, we currently compare the value with the options, is not valid for items, which are objects.

Object (won't work currently)

// Notice, that we use the plain item in ng-value here.
<md-option ng-repeat="item in vm.items" ng-value="item">{{ item.name }}</md-option>

Single Variable (This will work anyway)

// Notice, that we use the id of the item in ng-value here.
<md-option ng-repeat="item in vm.items" ng-value="item.id">{{ item.name }}</md-option>

[mpiasta-ca]

I'm using 1.1.0-rc.5 and the bug is still there. Is there a fix coming soon? I need to launch to production in a few weeks.

[saleem-git]

As far as I know you'll need to install the master version until they release the next version.

To get the most recent, latest committed-to-master version use:
bower install angular-material#master

[mpiasta-ca]

@saleem-git Oh cool, thanks. So master is newer than 1.0.9?

[saleem-git]

Yup, every new commit goes there. But the drawback here is that it may have some new bugs, so tread carefully. Although I must mention I have been using master after encountering this bug and it seems fairly stable.

[mpiasta-ca]

Every other branch has bugs so it can only get better, right? lol :+1:

[mpiasta-ca]

@saleem-git #master seems to not work on older version of Chrome/Safari (tested on MacBook and iPod with iOS v.8), where it was working when we were using angular-material 1.0.9. The website loads but the design is all fubbered, seems like maybe Flexbox isn't working.

Any ideas what might have changed? Or was support for older Safari/Chrome browsers dropped in the last few months.

[Edit:] Seems to be missing -webkit prefix for css: https://github.com/angular/material/issues/8999

[saleem-git]

As per docs, Angular Material is targeted for all browsers with versions n-1; where n is the current browser version. They probably removed support for older versions in the master and will do so for the next release. You may have to write browser version specific hacks, as I did for IE.

[cmolina]

I had a similar issue, this line does not work
<md-option ng-repeat="(id, be) in vm.parent.businessExecutivesDict" ng-value="id">{{be.fullName}}</md-option>

this line works
<md-option ng-repeat="be in vm.parent.businessExecutivesDict" ng-value="be.id">{{be.fullName}}</md-option>

[sandorTuranszky]

@camolin3 the second line does not work