Material: select: adds md-input-invalid even if it has a value selected

[ashishpatel02]

Actual Behavior:

• md-select is adding md-input-invalid without using required in angular material

Angular Versions: *

• Angular Version: 1.5.5
• Angular Material Version: 1.1.1
  

When Ever I Click Save Button It Goes Red, Screenshot is Attached.

[BobDankert]

We just upgraded to Angular 1.6.1 and Angular Material 1.1.1 and are having the same issue. Could you generate a codepen or other demo to demonstrate the issue?

[ashishpatel02]

@BobDankert Code Pen Is Working Fine, I Don't Know How But There Is An Issues For Sure.

[BobDankert]

Ok. I tried to create a CodePen to replicate it and was unable to as well. I'm not sure what is causing it - I spent a good amount of time trying to replicate what was causing the issue without success.

[BobDankert]

@ashishpatel02 I was able to narrow it down and opened a ticket, here: https://github.com/angular/material/issues/10264. Not sure if this is the same issue you were having

[ashishpatel02]

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

[chadwickmeyer]

We are using Angular 1.6.1 and Material 1.1.1 and we have multiple bug reports from users unable to submit the form because a required md-select field evaluates invalid, even when there is a valid value selected. We are unable to reproduce this bug ourselves, but we just have too many reports with screenshots from users, that show a value selected, but the select field still showing an error.

Live example: https://brandnewcongress.org/submit-nominee

State Select Field

<md-input-container class="md-input-has-placeholder">
    <md-select-label md-no-float class="noFloat">Nominee's State <span class="required">*</span></md-select-label>
    <md-select aria-label="Nominee's State" name="nomineeState" ng-model="data.nomineeState" md-no-asterisk required>
        <md-option ng-repeat="state in states" value="{{state.value}}">
        {{ state.text }}
        </md-option>
    </md-select>
    <div ng-messages="Nominate.nomineeState.$error" role="alert">
        <div ng-message-exp="['required']">Please a select a state.</div>
    </div>
</md-input-container>

[meshrajk]

This issue is still there. Looks like if the data in md-select is loaded from API then it keeps the class as ng-untouched. But if the data are pre-populated in HTML, then it doesn't show as invalid.
We are using AngularJS v1.6.4 and AngularJS Material Design v1.1.4

[Makatun]

workaround: instead of required put ng-required="!model"
Ex:
... ng-model="data.nomineeState" ng-required="!data.nomineeState" ...

[Splaktar]

I'm going to close this as there is no clear set of reproduction steps and demo. It appears that the issues are captured within https://github.com/angular/material/issues/10264. So I'm going to focus on that issue rather than this one.

@meshrajk that's an interesting observation. If that is still an issue, can you please submit a new issue with a CodePen demo and reproduction steps?

Sorry for the long delay in responding to this issue.