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).