required error on md-select not prevent the submit event

[leibale]

i have a form with ng-submit attribute and two inputs:

• md-input
• md-select

both of them are required
if the md-input is empty the submit is stopped (when you click the focus is set to the required input and a message pops on top of it)
if the md-select is empty the submit doesn't recognize it and goes through.

code example

Angular Versions:

• Angular Version: 1.5.5
• Angular Material Version: 1.0.9

[crisbeto]

I believe the select works as intended. Your form doesn't submit when the text field is empty, because of the default browser required attribute, not any of Angular's validations. If you add novalidate to the form, in order to disable the native browser validation, and you comment out the select, you can see that you can still submit the form with an empty input.

Here's a fork of your Plunk: http://plnkr.co/edit/LBptzJyyIi24ZvIadVTM?p=preview. If you try to log the statusForm.status.$error, you can see that the required error is being set properly.

[leibale]

@crisbeto so i must add ng-disabled on the submit button..?
and what about required error style (red border) for md-select?

[crisbeto]

You can either add ng-disabled on the button, or pass the statusForm.$valid to the submit method and prevent it from submitting there.

As for the red border, it will show up when the select is "dirty", e.g. if the user selected and then removed the value. You can see what that looks like in the "Validations" demo at the bottom.

[leibale]

@crisbeto the css rule for the error message in md-input is .ng-invalid and for md-select is .ng-invalid.ng-dirty, why there is a difference?

[crisbeto]

I'm not sure really, it might have to do with UX, so an empty select doesn't get highlighted the first time the user opens the page.

[leibale]

@crisbeto sorry, the css rule for the error message in md-input is md-input-invalid not .ng-invalid. this class added only after focus or submit (and not when the page opens).
could you ask the UX team or send them a link to this issue?

[crisbeto]

I'm pretty sure that this is the intended behaviour. If you want to make it underline when the form is submitted, you can add this to your CSS:

.ng-submitted md-select.ng-invalid .md-select-value{
  color: rgb(221,44,0);
  border-bottom-color: rgb(221,44,0);
}

[leibale]

@crisbeto there is no way that this is what the UX team wants.. if you can ask them and make sure that this is the behaviour it will be great :)

for now i will use the css you gave me

[topherfangio]

Part of this issue appears related to #8529 which I am working on today.

[leibale]

@crisbeto told you.. ;)
@topherfangio tnx :)

[adibas03]

Issue Fixed in version 1.13 thanks @topherfangio