ng-required not validating form on submit

[mouryaamit]

when using ui-select with ng-required or required attribute, form is not validating on submit action.

[howieweiner]

I'm also finding this issue. For me, it only occurs if the input is multi select

example: http://plnkr.co/edit/38ZVblng7d6B34DIGTIw?p=preview

[LeleDev]

Same issue here... validation on multiselect doesn't work

[line-o]

+1

[cgwyllie]

+1

[sandeep-goyal]

Thanks for this fix.. but still i can see one more issue. this ng required validation work first time perfectlly but once first select and then remove the element then ng-required validation didn't worked. can you please test this scenario as well.

1. without selecting any thing ng-required work fine
2. select few element
3. removed all element from drop down
4. you see ng-required is not working any more now.

[ericklombardo]

+1

[mkoryak]

+1
what are people doing to validate this thing in the meantime?

[ericklombardo]

I write a custom directive for override the $isEmpty function for ngController, like this:

angular.module('myModule).directive('uiSelectRequired', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            if (angular.isUndefined(attrs.multiple)) {
                 return;
            }
            ngModelCtrl.$isEmpty = function (modelValue) {
                return !modelValue.length;
            };
        }
    };
});

and its works; just have to include this directive along with ngRequired

[sandeep-goyal]

i tried but its giving me error can you please include some plunker so i will have implement in the same way. many Thanks for the help

[sandeep-goyal]

i found the issue if your all element is selected default in modal it will not work. It will work only once you select and remove any element. so for that i have put the fix in your custome directive.

ngModelCtrl.$isEmpty = function (modelValue) {
if(modelValue.length<1)
return !modelValue.length;
};

[marigan]

Actually there is a much better workaround. Just use ui-validate

<ui-select multiple ui-validate="{required: 'validateRolesRequired($value)', admin: 'validateRolesAdmin($value)'}">

then in controller

$scope.validateRolesRequired = (value)->
    !_.isEmpty(value)

  $scope.validateRolesAdmin = (value)->
    false

[abobwhite]

@richardallen Has your fix been merged?

Also, I added this code to my own project and it appears to have no effect.

[ravishivt]

+1

[noetix]

+1

[vtortola]

+1

[olso]

+1

[eliias]

+1

[sofiageo]

+1 (the patch is working fine by the way, but not all the times as reported above)

[dmitrygaraev]

Multiselect validation doesn't work in 0.9.9

[yaneq]

Not working for me either with ui-select 0.9.9 and angular 1.3.11

[yaneq]

I fixed it now by adding a custom validator for the multiple ui-select

module.directive('uiSelectRequired', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$validators.uiSelectRequired = function(modelValue, viewValue) {
        return modelValue && modelValue.length;
      };
    }
  };
});

// in view
ui-select {
  multiple='true'
  ng-model='something.something'
  ui-select-required
}

Plunkr

[zentetsukenz]

@yaneq solution almost works for me. The condition modelValue && modelValue.length; is not always return true or false, because the modelValue sometimes is undefined, so I have to check first wether modelValue or viewValue is an actual array, and finally check its length.

Here's the code

app.module.directive('uiSelectRequired', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$validators.uiSelectRequired = function(modelValue, viewValue) {

        var determineVal;
        if (angular.isArray(modelValue)) {
          determineVal = modelValue;
        } else if (angular.isArray(viewValue)) {
          determineVal = viewValue;
        } else {
          return false;
        }

        return determineVal.length > 0;
      };
    }
  };
});

This is my markup

<ui-select name="items" multiple
  ui-select-required
  ng-model="item.items">
  <ui-select-match>
    {{$item.name}}
  </ui-select-match>
  <ui-select-choices repeat="item in items | filter: $select.search">
    <div ng-bind-html=item.name | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

And the items list is an array of objects.

[
  {id: 1, name: 'item 1'},
  {id: 2, name: 'item 2'},
...
]

Anyone care to explain why modelValue, viewValue sometimes got undefined or some random number, would be appreciated.

[sofiageo]

@zentetsukenz why not use the patch from cc49678 ?
maybe the undefined has to do something with this bug #695? I've been stuck with version 0.9.7 because of this.

[zentetsukenz]

@gsf-greece I try version 0.11.1 and still not working so I go back to version 0.9.9, because, initially, my project use 0.9.9, then use the method posted above and finally got it works. Not sure why cc49678 wasn't fixed for me.

Thanks for your suggestion :)

[sofiageo]

Just an update, 0.11.2 fixes most of the problems I had encountered, so with the patch mentioned above ui-select seems to be working great. Let's hope it will be merged soon! thanks for your great work so far.

[cmichal]

Can patch cc49678 be merged to latest? It fixes this issue for me.

[sergiu-paraschiv]

Anyone else having an issue with the validation kicking in before user interaction (after applying patch cc49678) ? I don't see any use of $dirty, $touched or $pristine with this directive and ng-required.

[rafa-suagu]

+1

[landeeyo]

+1

@mukulgupta2507 Great job, thank you!

[rodrigocarranza-santex]

+1

[MadUser]

to support expression evaluation I am using this:

angular.module("app").directive('uiSelectRequired', function () {
        return {
            require: 'ngModel',
            link: function (scope, element, attr, ctrl) {
                ctrl.$validators.uiSelectRequired = function (modelValue, viewValue) {
                    if (attr.uiSelectRequired) {
                        var isRequired = scope.$eval(attr.uiSelectRequired)
                        if (isRequired == false)
                            return true;
                    }
                    var determineVal;
                    if (angular.isArray(modelValue)) {
                        determineVal = modelValue;
                    } else if (angular.isArray(viewValue)) {
                        determineVal = viewValue;
                    } else {
                        return false;
                    }
                    return determineVal.length > 0;
                };
            }
        };
    });

[stkrwilson]

This worked for me:

.directive('arrayRequired',function(){
  return {
    restrict:'A',
    require:'ngModel',
    link:function(scope,elem,attrs,ngModel){
      ngModel.$validators.arrayRequired = function(modelValue,viewValue){
        var modelValue = modelValue || {}
           return (modelValue.length>0 ? true : false);
      };
    }
  };
})

add array-required to ui-select object

[user378230]

@stkrwilson ng-required should work in the latest version as ngModel.$isEmpty is now correctly overidden are you able to reproduce the problem in latest version (v0.17.1) still?

[michahell]

ng-required did not work for me. Another ugly hack is to create a regular text input directly below the ui-select, give it the exact same ng-model and put a required on that. give it a CSS class that stays visible but that actually hides it.

.sg-hack-uiselect {
    line-height: 0.00001;
    height: 0.000001px;
    z-index: -1;
    position: relative;
    bottom: 10px;
    opacity: 0.1;
  }

  .sg-hack-uiselect:focus {
    outline: none;
  }

[zgbjgg]

Hello guys!,

I've solved this to use in one of our projects, you can find the library working here:

https://github.com/zgbjgg/ui-select/tree/ng-required

Basically, I did a change to observe the ng-required, and change to false when the model is not empty, otherwise is required (set to true),

I hope this can be helpful

:)

[randdusing]

@zgbjgg Can you point us to the changes you made?

[insidewhy]

@randdusing follow his link, check the commit log, view his commit.
@zgbjgg how about submitting a PR with your change? Although you'll need to alter your indentation style to match the project (git rebase -i upstream/master && git commit --amend)

[insidewhy]

@zgbjgg Ah you modified dist/select.js instead of the source files also.

[insidewhy]

@zgbjgg I cleaned up your commit and made it into a PR, hope you don't mind. I really need this to work ;)

[insidewhy]

@zgbjgg hm I just tested your changes and they don't work for me.

[patou]

I had to the template an hidden input who display the placeholder.
And I had put the ng-required on this input.
With this, the browser block the submit of the form and display a message.

Here my commit :
patou@6652d5e

I don't have time to realy test this new functionality and create a PR.

[zgbjgg]

Hello, I am not expert building with the tools provided by gulp for example, but, for a project, I helped to my team to make this work, and using with the code that I modified seems to work perfectly and the ng-required is validated correctly when a form is submitted!

[JosepAlacid]

I've just added two conditions more. Now I can use it in single selects.

    .directive('uiSelectRequired', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ctrl) {
            ctrl.$validators.uiSelectRequired = function (modelValue, viewValue) {
                if (attr.uiSelectRequired) {
                    var isRequired = scope.$eval(attr.uiSelectRequired)
                    if (isRequired == false)
                        return true;
                }
                var determineVal;
                if (angular.isArray(modelValue)) {
                    determineVal = modelValue;
                } else if (angular.isArray(viewValue)) {
                    determineVal = viewValue;
                } else if (angular.isObject(modelValue)) {
                    determineVal = angular.equals(modelValue, {}) ? [] : ['true'];
                } else if (angular.isObject(viewValue)) {
                    determineVal = angular.equals(viewValue, {}) ? [] : ['true'];
                } else {
                    return false;
                }
                return determineVal.length > 0;
            };
        }
    };
});

[doug31415]

Hey Guys, could simplify this like this, using lodash:

    ctrl.$validators.uiSelectRequired = function( modelValue, viewValue ) {
        var enabled = !_.isEmpty( modelValue ); // returns false for either {} or [], also for booleans
        return enabled;
      };

Might be missing something but it seems you wouldnt want to check on the viewValue unless, maybe, you were allowing someone to dynamically add tags, no?

[vamsikrishnamannem]

+1

[s1lviu]

+100 and thanks @doug31415

[Jefiozie]

Please do not "+1" issues, use github 👍 reactions if you really must. Comments should be reserved for constructive discussion/issue resolution. +1s merely add unnecessary noise and scrolling between other, more helpful, replies.

Other ways you can actually help include:

Submitting a pull request that resolves the issue/adds the requested feature
Researching possible implementations or causes of bugs
Providing reproduction plunkrs if one isn't already available

Thanks! 😄

[doug31415]

Hi Jeffrey Actually in our group we use the +1 to indicate a passing review, so its more than just noise. Is there some issue with our doing that on our own teams? Doug From: Fourth floor <[email protected]<mailto:[email protected]>> Reply-To: angular-ui/ui-select <[email protected]<mailto:[email protected]>> Date: Thursday, March 9, 2017 at 1:53 PM To: angular-ui/ui-select <[email protected]<mailto:[email protected]>> Cc: Doug Goodman <[email protected]<mailto:[email protected]>>, Mention <[email protected]<mailto:[email protected]>> Subject: Re: [angular-ui/ui-select] ng-required not validating form on submit (#258) Please do not "+1" issues, use github 👍 reactions if you really must. Comments should be reserved for constructive discussion/issue resolution. +1s merely add unnecessary noise and scrolling between other, more helpful, replies. Other ways you can actually help include: Submitting a pull request that resolves the issue/adds the requested feature Researching possible implementations or causes of bugs Providing reproduction plunkrs if one isn't already available Thanks! 😄 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#258 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AI0n6QczgLiksarMPpHy9ONFfZf2Jsz1ks5rkEqOgaJpZM4Cq5Is>.

[Jefiozie]

Don't know here it is preferred to do it in the way as described.
Still thanks for sharing your thoughts on this +1 handling.

[kipusoep]

Works fine for me...
Versions:
angular: v1.6.7-build.5483+sha.84294ec
angular-ui-select: v0.19.8

[Jefiozie]

I'm going to close this issue. As this issue is present a long time I think it is best to create a new one when people want to address this again.

Hope you all agree if not let me know I will reopen it. 😺