Material: select: required error when populated with md-option using value with number

[BobDankert]

Actual Behavior:

• What is the issue? An md-select with md-options that have numerical values (eg, value="2"), as well as the required attribute, will be incorrectly invalid due to the required attribute on load when there is a value bound to the model. The issue does not happen with strings in the value, does not happen with numbers using ng-option, and does not happen after you select a value. It also does not happen with select, only md-select.

• What is the expected behavior? There should be no error on the initial load.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/bobdankert/pen/rjMXqZ?editors=1010#0

Angular Versions: *

• Angular Version: 1.6.1
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 55.0.2883.87 m
• OS: * Win10

[BobDankert]

Quick note - this happens with Angular 1.5.5 as well as 1.6.1.

[ashishpatel02]

@BobDankert Weird Thing Is When I Check With this.$scope.formName.$invalid, Shows Me False Then Also I'm Getting Required.

[ashishpatel02]

@BobDankert , I'm not sure why it is closed but the issue persists after any release of 1.0.9 Angular Material Only, It Will Work Fine With 1.0.9 And Below.

Added: Shows Error Without Using Required Attribute.

[gustavocampos]

You must use ng-value in md-option if you're not working with a String as a value, which is your case, your $scope.selectedNumberPop = 1 is putting a integer value on the md-select model which has a string option: <md-option value="1">Yes</md-option>
try: <md-option ng-value="1">Yes</md-option>

[BobDankert]

@gustavocampos While I agree with you, the error shown in the codepen of this issue is still a valid bug. It is selecting the md-option, however there is an $error on the component for required, even though there is visibly an element selected.

[gustavocampos]

The conversion to String done by "value" attribute allows the option to be selected, but the model as an integer doesn't match any available option and fails on required.
IMHO the way it's written in the codepen is a programming error but the message should say "invalid value" or something like that, not "field required".

[BobDankert]

@gustavocampos Seems to me that the way "required" works and the way selecting the value works should match. The required directive is used to set an error if there is no value on the field. In this case, visually there is a value on the field, however there is an error indicating there is no value. Even though it may not be implemented correctly (using ng-value), it still seems like a bug that the model behavior does not match the required directive behavior for this.

[BobDankert]

Also worth noting, is prior to Angular Material 1.1.0 this worked correctly (such as 1.0.9, as noted above).

[Splaktar]

From our md-select docs:

Note: Using the value attribute (as opposed to ng-value) always evaluates to a string, so value="null" will require the test ng-if="myValue != 'null'" rather than ng-if="!myValue".

I can see how this could be less than 100% clear, so I am going to rewrite this. Additionally, we don't even have proper docs for md-option or md-optgroup, so I am going to add those as well.

[Splaktar]

PR https://github.com/angular/material/pull/11435 adds the missing docs and significantly clarifies the limitations of using the value attribute (i.e. string values only).