New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

required or ng-required not working with ui-select 'multiple' option #914

Closed
vinayagarwal opened this Issue May 11, 2015 · 15 comments

Comments

Projects
None yet
@vinayagarwal

vinayagarwal commented May 11, 2015

required or ng-required=true is working fine with ui-select when the control is expected to select single value. However, with 'multiple' option, it is not working. The model presumes the value as array [], and marks it as valid=true.

Am I the only one facing this issue? Is this issue already addressed in the next version?

@vinayagarwal vinayagarwal changed the title from required or ng-required not working with ui-select 'mutliple' option to required or ng-required not working with ui-select 'multiple' option May 11, 2015

@imaa

This comment has been minimized.

Show comment
Hide comment
@imaa

imaa May 11, 2015

I found this solution here

angular.module('common').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;
        };
    }
};

});

add ui-select-required

imaa commented May 11, 2015

I found this solution here

angular.module('common').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;
        };
    }
};

});

add ui-select-required

@vinayagarwal

This comment has been minimized.

Show comment
Hide comment
@vinayagarwal

vinayagarwal May 13, 2015

Thanks imaa! It is working well. The error msg also started showing up when I change the condition from:
ng-show="abcForm.tasks.$error.required"
to
ng-show="abcForm.tasks.$invalid"

Wondering, can this be merged with the main repository or with ng-required itself with more sophistication to handle $error.required as well?

vinayagarwal commented May 13, 2015

Thanks imaa! It is working well. The error msg also started showing up when I change the condition from:
ng-show="abcForm.tasks.$error.required"
to
ng-show="abcForm.tasks.$invalid"

Wondering, can this be merged with the main repository or with ng-required itself with more sophistication to handle $error.required as well?

@frekele

This comment has been minimized.

Show comment
Hide comment
@frekele

frekele Jun 9, 2015

ng-required or only required not work with "<ui-select multiple tagging" for me too.
Component in form validation not detect state $scope.myform.$valid or $scope.myform.$invalid.

frekele commented Jun 9, 2015

ng-required or only required not work with "<ui-select multiple tagging" for me too.
Component in form validation not detect state $scope.myform.$valid or $scope.myform.$invalid.

@evdoks

This comment has been minimized.

Show comment
Hide comment
@evdoks

evdoks Jun 11, 2015

I confirm the behaviour - when multiple is set required is not working.

evdoks commented Jun 11, 2015

I confirm the behaviour - when multiple is set required is not working.

@jcolemorrison

This comment has been minimized.

Show comment
Hide comment
@jcolemorrison

jcolemorrison Jun 18, 2015

I just submitted a PR to fix this issue. It will allow you to just put required directly on the multiple tag and receive the expected functionality.

PR Link: #1025

jcolemorrison commented Jun 18, 2015

I just submitted a PR to fix this issue. It will allow you to just put required directly on the multiple tag and receive the expected functionality.

PR Link: #1025

@vinayagarwal

This comment has been minimized.

Show comment
Hide comment
@vinayagarwal

vinayagarwal Jun 19, 2015

That's great Cole. Thank you.

vinayagarwal commented Jun 19, 2015

That's great Cole. Thank you.

@michal-filip

This comment has been minimized.

Show comment
Hide comment
@michal-filip

michal-filip Jul 8, 2015

The solution above works for me as well. Thanks!

michal-filip commented Jul 8, 2015

The solution above works for me as well. Thanks!

@GilbertChan

This comment has been minimized.

Show comment
Hide comment
@GilbertChan

GilbertChan Jul 15, 2015

@improvisio how did you get the solution above working? I added the module then added ui-select-required in the ui-select tag but its not working.

GilbertChan commented Jul 15, 2015

@improvisio how did you get the solution above working? I added the module then added ui-select-required in the ui-select tag but its not working.

@michal-filip

This comment has been minimized.

Show comment
Hide comment
@michal-filip

michal-filip Jul 16, 2015

@GilbertChan I first added the directive as shown above: #914 (comment)
Then it worked. ui-select-required is not part of the ui-select package.

michal-filip commented Jul 16, 2015

@GilbertChan I first added the directive as shown above: #914 (comment)
Then it worked. ui-select-required is not part of the ui-select package.

@japharr

This comment has been minimized.

Show comment
Hide comment
@japharr

japharr Aug 4, 2015

Thanks, @imaa it works!

japharr commented Aug 4, 2015

Thanks, @imaa it works!

@dudapiotr

This comment has been minimized.

Show comment
Hide comment
@dudapiotr

dudapiotr Sep 8, 2015

@jcolemorrison

Check only required param doesn't work for me if i set ng-required="true", but code below works fine

if (angular.isDefined(attrs.multiple) && (angular.isDefined(attrs.required) ||  angular.isDefined(attrs.ngRequired)) ) {

dudapiotr commented Sep 8, 2015

@jcolemorrison

Check only required param doesn't work for me if i set ng-required="true", but code below works fine

if (angular.isDefined(attrs.multiple) && (angular.isDefined(attrs.required) ||  angular.isDefined(attrs.ngRequired)) ) {
@macem

This comment has been minimized.

Show comment
Hide comment
@macem

macem Nov 21, 2015

My solution

angular.module('angularApp')
  .directive('uiRequired', function() {
    return {
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        ctrl.$validators.required = function(modelValue, viewValue) {
          return !((viewValue && viewValue.length === 0 || false) && attrs.uiRequired === 'true');
        };

        attrs.$observe('uiRequired', function() {
          ctrl.$setValidity('required', !(attrs.uiRequired === 'true' && ctrl.$viewValue && ctrl.$viewValue.length === 0));
        });
      }
    };
  });

macem commented Nov 21, 2015

My solution

angular.module('angularApp')
  .directive('uiRequired', function() {
    return {
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        ctrl.$validators.required = function(modelValue, viewValue) {
          return !((viewValue && viewValue.length === 0 || false) && attrs.uiRequired === 'true');
        };

        attrs.$observe('uiRequired', function() {
          ctrl.$setValidity('required', !(attrs.uiRequired === 'true' && ctrl.$viewValue && ctrl.$viewValue.length === 0));
        });
      }
    };
  });
@CLOUGH

This comment has been minimized.

Show comment
Hide comment
@CLOUGH

CLOUGH Feb 5, 2016

@macem Thanks alot that helped

CLOUGH commented Feb 5, 2016

@macem Thanks alot that helped

@Avien

This comment has been minimized.

Show comment
Hide comment
@Avien

Avien Feb 9, 2016

@macem Thanks as well,
I've just used it and it works perfectly!

Avien commented Feb 9, 2016

@macem Thanks as well,
I've just used it and it works perfectly!

@user378230

This comment has been minimized.

Show comment
Hide comment
@user378230

user378230 Mar 16, 2016

Collaborator

Resolved by #1492

Collaborator

user378230 commented Mar 16, 2016

Resolved by #1492

@user378230 user378230 closed this Mar 16, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment