angularjs - angular select $touched validation -

i have form select , button enabled when form validated. works fine input box. however, $touched not seem working select. button enabled when select touched. supposed turn invalid when select touched. turns invalid , button disabled when select option , select default value. want work when select touched , user mouse pointer away. here html:

<form role="form" name="frameversioneditor" novalidate class="form-horizontal col-md-12"> <div class="row">     <div class="form-group col-lg-2 col-lg-push-1" ng-class="{'has-error' : frameversioneditor.distributor.$invalid && frameversioneditor.distributor.$touched}">         <label>distributor</label>         <select name="distributor" data-ng-model="mydistr" data-ng-options="distributors.key distributors.value distributors in distributoroptions" class="form-control" required>             <option value="">select distributor</option>         </select>         <span ng-show="frameversioneditor.distributor.$error.required && frameversioneditor.distributor.$touched" class="help-block">please select distributor</span>     </div> </div> </form> <button data-ng-click="generate()" ng-disabled="frameversioneditor.$invalid">generate</button> 

here controller:

var myapp = angular.module('myapp',[]);  myapp.controller('mycontroller', ['$scope', function($scope) {       $scope.mydistr = [];       $scope.distributors =             [                 {                     'key': '0',                     'value': 'a'                 },                 {                     'key': '1',                     'value': 'b'                 },                 {                     'key': '2',                     'value': 'c'                 }             ];       $scope.generate = function() {       //do       }; }]); 

i had same issue short time ago. solved adding few things select field , entry array of possible selections.

first, want add empty or invalid selection list of possible selections, best place in [0] slot , you'll see why further down.

vm.distributors = [ "select distributor", "a", "b", "c" ]; 

next, need add , update angular directives select field. want ng-valid tell angular acceptable here. need specify starting field "select else" value , not valid value selected during submit. adding name , id best practice items. last bit add ng-required directive, since used novalidate on form, required form item change valid. end result below:

<div class="form-group col-lg-2 col-lg-push-1" ng-class="{'has-error' : vm.mydistr == vm.distributors[0] && frameversioneditor.$dirty     || frameversioneditor.distributor.$pristine && frameversioneditor.distributor.$touched}">       <label>distributor</label>       <select data-ng-model="vm.mydistr" id="mydistr" name="mydistr" ng-init="vm.distributors[0]" class="select form-control skinny" ng-required="true"         data-ng-options="d d in vm.distributors" ng-valid="vm.mydistr != vm.distributors[0]"></select>         <p class="required" ng-show="vm.mydistr == vm.distributors[0]">&#42;</p>         <p class="good" ng-show="vm.mydistr != vm.distributors[0]">&#10004;</p>       <span ng-show="vm.mydistr == vm.distributors[0] && frameversioneditor.$dirty || frameversioneditor.distributor.$pristine       && frameversioneditor.distributor.$touched" class="help-block">please select distributor</span> 

this updated illustrate simplest implementation (since using 0-4 keys, don't need them, use basic array). changed code coincide john papa's best practices , added in red asterisk (for invalid selections) , green check mark (for correct selection), practice (show success failure) in case of non-english-speaking users.

you not need beginning option specified since updates handle nicely.

by request, here plunker.

i hope helps.

-c§