Custom Directive for Required/ngRequired

Question

I want to validate a dropdown with required. Default required only works if value is null or blank (correct me if I'm wrong). I want required to give error and make form invalid true if value is 'not assigned'.

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

Using this I can show error message but this does make form invalid

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

SOLUTION:-

1) If you want to use required then Check Shannon Hochkins solution.

<form name="formName">
      <select name="first" class="select" title="Select Approver" ng-model="applications.first" ng-options="x.id as x.value for 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 a option with blank value <option value="">Not Assigned</option>. and set required="true" in select. This 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 we have nothing to compare against
                       ctrl.$setValidity('req', false);
                   } else {
                       ctrl.$setValidity('req', true);
                   }
               };
               $attrs.$observe('req', function(comparisonModel) {
                   // Whenever the comparison model changes we'll re-validate
                   return validate(ctrl.$viewValue);
               });
           };
           return {
               require: 'ngModel',
               link: link
           };

       }
   ]);

And Your html code :

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

Here you will have to set invalid="not assigned" or any value like invalid='0' or invalid=' '. In directive it compares with invalid attribute if value matches it will show error.

Have you tried assigning the default value of the dropdown to: `applications.first = null` — Shannon Hochkins, Aug 29 '16 at 06:02
@ShannonHochkins i have cascaded dropdown and i have used filter let me update my question. — Keyur Shah, Aug 29 '16 at 06:09
problem with making default value null is it ruins the filter on other dropdown. and making it blank(with no options) — Keyur Shah, Aug 29 '16 at 06:14
See my demo link, you don't have to specify a default when using the form object as the validator — Shannon Hochkins, Aug 29 '16 at 06:15

Shannon Hochkins · Accepted Answer · 2016-08-30T10:44:01.293

0

Add the required value to the select element, then you can use the FORM object to check if the field is valid or not.

You can also use the forms name, to access fields in the form to check validity. If you want to add a 'default' option, to the dropdown, you can add in an option with an empty value which is technically invalid on a required dropdown menu. You can choose to hide it if it is valid so the user can't pick it again after a correct option has been chosen.

<form name="formName" ng-controller="testCtrl">
    <select name="first" ng-options="x.id as x.value for 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 your controller, setup some options:

angular.module('sandbox', []).controller('testCtrl', function($scope) {

  $scope.list1 = [{
    id: 1,
    value: 'apples'
  }, {
    id: 2,
    value: 'oranges'
  }];
});

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

edited Aug 30 '16 at 10:44

answered Aug 29 '16 at 06:09

Shannon Hochkins

11,763
15
62
95

Your answer is correct. but i cant use this. see i have updated my question. and i have to set default value of model as 'not assigned'. – Keyur Shah Aug 29 '16 at 07:37
You've completely changed your question! – Shannon Hochkins Aug 29 '16 at 12:49
Please don't just keep changing your question whenever you get stuck, you need to create a new question, however I've added in a default option to the dropdown menu. https://jsfiddle.net/suunyz3e/301/. I wouldn't assign the actual value as 'not assigned' as that is technically valid. If you need the actual values to be something before they hit the server you can do that translation before it's sent – Shannon Hochkins Aug 29 '16 at 12:54
@KeyurShah please mark my question as correct as you said it is the correct answer – Shannon Hochkins Aug 30 '16 at 02:15
Thank You.! for your time and efforts! Can you update your answer according to your fiddle? i will accept it. – Keyur Shah Aug 30 '16 at 06:16
Updated @KeyurShah – Shannon Hochkins Aug 30 '16 at 06:40

Custom Directive for Required/ngRequired

1 Answers1