Validating dropdown menu in AngularJS

Question

I have the following code that validates only when the control moves away from the given select element, that is the border of the select element does either red or green only when the given select is tabbed away or the mouse cursor has moved away from the given select element

<select class="form-control input-xsmall select-inline" ng-class="{'invalid': form.year.$dirty && currentYear=='Year', 'valid': form.year.$dirty && currentYear != 'Year'}" data-ng-model="currentYear" name="year">
    <option>Year</option>
    <option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>

What could I do to show the user either the green or the red border based on the validity of the select box while he/she is actually setting the value of the option element but has made the select element $dirty or !$pristine.

Could somebody help me with it?

Answer 1

You can add you own "touched" property to the year by using ng-blur and then use that "touched" property to add the right class

<select class="form-control input-xsmall select-inline" 
  ng-class="{'invalid': form.year.isTouched && currentYear=='Year', 'valid': form.year.isTouched && currentYear != 'Year'}" 
  ng-blur="form.year.isTouched = true"
  data-ng-model="currentYear" 
  name="year">
    <option>Year</option>
    <option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>

See this sample plunker: http://plnkr.co/edit/Wpz27yBw8OXSaYfpkP3z?p=preview