enkryptor enkryptor - 1 year ago 66
AngularJS Question

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

I have a required


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

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
is empty by default and there is no validation. How to make AngularJS validate the default value?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download