AngularJS Select Doesn't Error When Model Value Not In Options

Angular 1.4.8. I have this markup for 2-letter US state codes:

Solution 1:

One thing you can do to trigger errors on the ngModel directive is to add a custom validator to the ngModel's $validators.

The ngModel's value is passed through the $validators whenever it changes, and an error is raised if the validator returns false.

An example implementation is to add a custom directive to the model's element, and define the validator inside that directive:

Here's a plunkr with a working example: http://plnkr.co/edit/m6OygVR2GyMOXTTVTuhf?p=preview

// markup
<select name="licenseState" id="licenseState" class="form-control" required
  ng-model="student.License.State"
  ng-options="key as value for (key, value) in licenseFormats"
  check-state
  license-formats="licenseFormats">

// in the controller
$scope.licenseFormats = {
  'OR': 'Oregon', 
  'WA': 'Washington', 
};     

// the directive
app.directive('checkState', function() {
  return {
    scope: {
      licenseFormats: '='
    }, 
    restrict: 'A', 
    require: 'ngModel', 
    link: function(scope, element, attributes, ngModel) {

      // defining the validator here
      ngModel.$validators.state = function(modelValue) {
        return Object.keys(scope.licenseFormats).indexOf(modelValue) > -1;
      }
    }
  }
});

Share

You may like these posts

• 
  @keyframes Animation Plays For The First Time Only
• 
  Finding An Ng-repeat Index?
• 
  Binding DataViz Chart (Bar Chart) Locally Using Angular
• 
  AngularJS Set Dynamic Key In Array Element