AngularJs doesn't validate a invalid dropdown selection

Question

Here is a basic plunker that demonstrates the problem.

• When you set the dropdownlist/select element model to empty you receive the required error message

• But when you set the model from controller, and the model is not a option in the provided ng-options select element fails to show required. But the dropdown/select is in invalid state

Plunker

http://plnkr.co/edit/gLtjRwkaaBOQG7YMvDav?p=preview

So how do we go about solving this problem?

Answer 1

Reference Documentation - Scroll to the bottom to the $error section.

$error only validates attributes of the select tag and not the option selected.

required is an attribute of the select tag - thus when the dropdown is empty, the $error flag is set to true.

However, assigning an option that is not among the predefined options is not handled by $error - you have to handle this yourself using something like:

<input type="button" value="Submit" ng-click="submitForm($event)">

And in your controller:

$scope.submitForm = function (event) {
    event.preventDefault();

    //Do your validation on the select value

    //If everything is fine, call the actual submit function
};