Material: required attribute on md-select not working anymore

[wembernard]

I guess it's related to #6393 but @DevVersion didn't seem to fix md-select (only md-autocomplete), so I'm opening a new issue.

I've been trying

      <md-input-container class="md-block">
        <label>Favorite Number</label>
        <md-select name="myModel" ng-model="myModel" required="true">
          <md-option value="1">One</md-option>
          <md-option value="2">Two</md-option>
        </md-select>
      </md-input-container>

with angular-material#1.0.3 and angular-material#1.0.5 but didn't make it work.

Some Demo

Any idea/news on this problem?

[devversion]

@wembernard Thanks for filing a new issue. I will take a look.
Just linking to #6803

[devversion]

@wembernard
Waiting for a response here

At the moment in this PR, in most cases we support required="false" required="true", so the required attribute is accepting a boolean as value. But this is not a default behavior in HTML from W3C.

The users should better use ng-disabled, ng-readonly and ng-required.
So IMO we should not parse the attribute values from these type of attributes.

• disabled
• readonly
• required

So I'm not sure if I really should implement the new parses for these type of attributes.

[wembernard]

@DevVersion ng-required didn't work either.

Here is a Demo

[devversion]

@wembernard In general ng-required works. As you can see here in the demo (http://codepen.io/DevVersion/pen/OMaBBY?editors=1010) ng-required is accepting booleans as value. But the thing is, the form will be submitted (in case that the form is invalid). Is that your actual problem?

[devversion]

@wembernard As native components (like input etc.) will prevent form from being submitted, you should add to your form: name="myForm" ng-submit="myForm.$valid && ctrl.submit()".

[wembernard]

Thanks @DevVersion for looking into this.

The form from being submitted is indeed one of my problems. I guess whether it's a simple input or a complex md-select, submitting forms should behave the same way: either block the submission or send it. I'm ok using myForm.$valid but it should be needed for <input> too in this case.

The second one is the display: it should be red to inform user one of the validation on this field did not pass. Just like a simple , right?

[devversion]

@wembernard Yes definitely, it should be red. Extra for this case was ngMessages built. As you can see in following example, if you open the panel (which sets the select to touched ) and then close it without selecting an item, you will the ngMessage will appear. Another example is, select a value and then set the select model to undefined (using the clear button)

http://codepen.io/DevVersion/pen/OMaBBY?editors=1010

[wembernard]

@DevVersion I added the simple input to note behaviour differences: http://codepen.io/anon/pen/qbLJvV?editors=1010

[devversion]

@wembernard Yes, I know, the native input with required looks much more user-friendly.

[wembernard]

Actually, md-select used to work the same:

(from https://material.angularjs.org/latest/demo/select)

[devversion]

@wembernard I'll close that issue because the attribute in general works. (requiredandng-required`)

• See select's attribute validation - http://codepen.io/DevVersion/pen/OMaBBY?editors=1010
• See required select in form - http://codepen.io/DevVersion/pen/eZYRQL

About the form validation (errors when submitting form) there was already an issue, but this was focused on the input component. So it would be great if you create new issue which focuses on custom components which are required in a form (like md-select, md-chips - there you can use my second demo).

[bpaczkowski]

@DevVersion The codepen.io you linked specifically indicates how md-select does not work with required attribute. You only need to input name and e-mail in your codepen for the form to pass, md-select is not needed.

The cdn in that codepen is no longer valid, I used 1.0.9 version cdn, maybe the bug was introduced between versions 1.0.5 and 1.0.9.

[devversion]

@bpaczkowski I've updated the codepen assets to use 1.0.6.

The codepens show clearly how the select integrates the required attribute within the validation of a form.

• The $valid property will be always false until the user selects something in the md-select. (Works as expected)
• The $valid property will be true when the md-select doesn't have any value (Works as expected)

The form will be always submitted, regardless of the select, because you explicitly click on the submit button and the browser can't detect the md-select as an native form control.

There is nothing we can do about native submit prevention.

[bpaczkowski]

Ahh, so that's the reason why it was still submitting. Thank you for clarifying this for me.

[caneraydinbey]

Doesnot work still. http://stackoverflow.com/questions/39018074/empty-value-of-select-box-doesnot-give-error-material-design

[adibas03]

Issue Fixed in version 1.13 https://github.com/angular/material/issues/8529

[AntonisFK]

Still having this issue on v1.1.4 Had to remove the null option for it to work
<md-select ng-model="$ctrl.myModel" md-no-asterisk required> <md-option ng-value="">Not selected</md-option> <md-option ng-value="1">1</md-option> <md-option ng-value="2">2</md-option> </md-select>