Md-select - how to force require?

Question

How to make md-select behave the same way in several modes

 <select multiple required ... > 

?

Here is a violin to show what I mean. In this example, my browser does not allow me to submit a form without selecting at least 1 option from the select tag.

I want md-select to behave the same way, but I don’t know how to do this - neither setting the attribute 'required', nor adding the directive 'ng-require'.

Answer 1

You can rely on Angular to do the validation for this, and not in the browser. Here is my forked example:

http://codepen.io/anon/pen/rVGLZV

In particular:

 <button type="submit" ng-disabled="myForm.$invalid">submit</button> 

So that the submit button is disabled until the form is valid, and

 <form novalidate name="myForm"> 

To name the form and tell the browser not to do its own validation.

You can even add some CSS class for ng-invalid to display red color around invalid fields.

EDIT: make sure you put ng-model on <select multiple> , otherwise the required attribute will not work.

Answer 2

If you do not want to disable the submit button, but instead throw an error when you click the submit button, you can set the $ touched property to true to trigger the required warning

 yourFormName.mdseletName.$touched=true;