enkryptor enkryptor - 9 days ago 6
AngularJS Question

"Required" validation doesn't work in <select> with default value

I have a required

<select>
field:

<select name="service_id" class="Sitedropdown" style="width: 220px;"
ng-model="ServiceID"
ng-options="service.ServiceID as service.ServiceName for service in services"
required>
<option value="">Select Service</option>
</select>


When it is empty, the form should display a "Select service" error message. Here's a working plunker.

It works fine when you intentionally selects the empty option. But when you reload the page, the
service_id
is empty by default and there is no validation. How to make AngularJS validate the default value?

Answer

Your code:

ng-show="myForm.service_id.$dirty && myForm.service_id.$invalid"

This means - if value is dirty (was changed) and is invalid. Remove first and you'll get what you want.

Comments