md-select - how to force required?

Question

How do I force md-select in multiple mode to behave just like

<select multiple required ... >

?

Here is the fiddle, to show what I mean. In this example, my browser doesn't let me submit form without selecting at least 1 option from the select tag.

I want md-select to behave similarly, but I don't know how can I do that - neither putting 'required' attribute nor adding 'ng-require' directive helps.

Answer 1

You can rely on Angular to do the validation for this, rather than the browser. Here's my forked example:

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

Specifically:

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

To keep the submit button 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 on it.

You could even add some CSS class for ng-invalid to show red around the invalid fields.

EDIT: Make sure you put an ng-model on your <select multiple>, otherwise the required attribute won't work.

Answer 2

If you don't want to disable submit button but instead trigger error when submit button is hit, you can set the $touched property to true to trigger required alert

yourFormName.mdseletName.$touched=true;