CODEWITHSUNDEEP
angularjsangularjs-validation
enkryptor
enkryptor

Reputation: 1663

"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?

Upvotes: 2

Views: 3950

Answers (2)

Petr Averyanov
Petr Averyanov

Reputation: 9476

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.

Upvotes: 3

lucasnadalutti
lucasnadalutti

Reputation: 5948

Validation checks are only run after the value bound to ng-model is changed at least once, or when the user attempts to submit the form. If that was not the case, all the required fields of a form would be shown with error right after page loading, which would be a pretty undesirable behavior.

That's why you only see the error when selecting something else and then changing it back to the empty value.

Upvotes: 1

Related Questions