Feature request: add support for ng-required

[igoreso]

The following Plunk originally posted by @geoffstokes in issue #154 fits nicely for this feature.

http://plnkr.co/edit/u6eh1ISksdFUpoInafij?p=preview

[mbenford]

I'm not sure whether supporting a [ng-]required option is a good idea. As @geoffstokes said in #154 it would be essentially an alias for min-tags="1" and the code would have to handle scenarios like the following ones:

<tags-input ng-model="tags" min-tags="2" ng-required="required"></tags-input>

<tags-input ng-model="tags" min-tags="0" ng-required="required"></tags-input>

In the first example, the value of required would have to be solely ignored. In the second one, it would have to override min-tags="0".

I don't think the extra code to handle these situations is worth it since min-tags works just fine, not to mentioning the docs would have to explain all of these nuances regarding both options.

[igoreso]

Uhh, min-tags is not an expression, am I right? That means I can't change it run-time, which is what we would like to do.

[ticky]

I think we're conflating the purpose of these two tickets. This one is only for ng-required, #154 is only for the defect in the min-tags evaluation.

In my opinion, the code to support checking ng-required would not be significantly complex. I would implement it something like this;

if (options.ngRequired && options.minTags < 1) {
    options.minTags = 1;
}

This way, it only changes the logic if the minTags is not already set to something greater than zero.

[igoreso]

Well, here is my workaround. This is probably ugly, but whatever, this works for me.

1. Add the ngRequired: '=' in the scope of the directive so it looks like this:

        scope: {
            tags: '=ngModel',
            onTagAdded: '&',
            onTagRemoved: '&', // don't forget the comma
            ngRequired: '=' // new
        },

2. Find the following below

            scope.$watch('tags.length', function(value) {
                ngModelCtrl.$setValidity('maxTags', angular.isUndefined(options.maxTags) || value <= options.maxTags);
                ngModelCtrl.$setValidity('minTags', angular.isUndefined(options.minTags) || value >= options.minTags);
            });

and change it to this:

            var isRequired = false;

            var setValidity = function (length) {
                ngModelCtrl.$setValidity('maxTags', angular.isUndefined(options.maxTags) || length <= options.maxTags);
                ngModelCtrl.$setValidity('minTags', angular.isUndefined(options.minTags) || length >= options.minTags || !isRequired);
            };

            scope.$watch('ngRequired', function (required) {
                isRequired = required;
                setValidity(scope.tags.length);
            });

            scope.$watch('tags.length', function (length) {
                setValidity(length);
            });

Usage:

<tags-input ng-model="BINDING" min-tags="1" ng-required="EXPRESSION">
</tags-input>

This way if ng-required is false - min-tags is ignored.

[collect-it-sean]

+1

[mbenford]

@geoffstokes Don't worry. I'm aware of the differences between issue #154 and this one.

@igoreso All options, including minTags, support one-time interpolation by default. If you want any of them to get updated every time their expression value changes, you need to turn on active interpolation by calling setActiveInterpolation in your application's config function. There's an example of that on the documentation page.

About ng-required, I took a look at Angular's code and it turns out to be very easy for ngTagsInput to support it: all I have to do is override the NgModelController.$isEmpty function and provide a meaning for "empty". I'll add this issue to the backlog.