html - Custom Directive for Required/ngRequired -

i want validate dropdown required. default required works if value null or blank (correct me if i'm wrong). want required give error , make form invalid true if value 'not assigned'.

<select name="first" class="select" title="select approver" ng-model="applications.first" ng-options="x.id x.value x in list1" ng-change="settoall(applications.first,'1')" required></select> 

using can show error message make form invalid

<span class="error" ng-show="applications.first == 'not assigned'?true:false">select approver</span> 

solution:-

1) if want use required check shannon hochkins solution.

<form name="formname">       <select name="first" class="select" title="select approver" ng-model="applications.first" ng-options="x.id x.value x in list1" ng-change="settoall(applications.first,'1')" required="true">         <option value="">not assigned</option>       </select>       <span class="error" ng-show="formname.first.$invalid ?true:false">select approver</span>       <pre>{{formname | json}}</pre> </form> 

he added option blank value <option value="">not assigned</option>. , set required="true" in select. works perfectly.

2) using custom directive.

app.directive('req', [        function() {            var link = function($scope, $element, $attrs, ctrl) {                var validate = function(viewvalue) {                    var comparisonmodel = $attrs.req;                    var invalid = $attrs.invalid;                    if (viewvalue == invalid) {                        // it's valid because have nothing compare against                        ctrl.$setvalidity('req', false);                    } else {                        ctrl.$setvalidity('req', true);                    }                };                $attrs.$observe('req', function(comparisonmodel) {                    // whenever comparison model changes we'll re-validate                    return validate(ctrl.$viewvalue);                });            };            return {                require: 'ngmodel',                link: link            };         }    ]); 

and html code :

<select invalid="not assigned" req={{applications.first}} name="first" class="select" ng-model="applications.first" ng-options="x.id x.value x in list1" title="select approver" ></select> <span class="error" ng-show="step5.first.$error.req">select approver</span> 

here have set invalid="not assigned" or value invalid='0' or invalid=' '. in directive compares invalid attribute if value matches show error.

add required value select element, can use form object check if field valid or not.

you can use forms name, access fields in form check validity. if want add 'default' option, dropdown, can add in option empty value technically invalid on required dropdown menu. can choose hide if valid user can't pick again after correct option has been chosen.

<form name="formname" ng-controller="testctrl">     <select name="first" ng-options="x.id x.value x in list1" ng-model="applications.first" required>         <option value="" ng-hide="formname.first.$valid">not assigned</option>     </select>     <pre>{{formname.first.$invalid | json}}</pre> </form> 

inside controller, setup options:

angular.module('sandbox', []).controller('testctrl', function($scope) {    $scope.list1 = [{     id: 1,     value: 'apples'   }, {     id: 2,     value: 'oranges'   }]; }); 

demo: https://jsfiddle.net/suunyz3e/304/