Do not display placeholder when max-tags has been reached

[steve-lorimer]

when max-tags has been reached, the placeholder text should not be displayed, as it is now no longer possible to "Add a tag"

[mbenford]

Hi @stevelorimer.

The directive doesn't limit the number of tags that can be added; it simply becomes invalid when the max-tags option is reached.

Kind regards.

[steve-lorimer]

If I've got max-tags tags already, I can type extra words, but if I hit enter (or comma), it won't accept the input.

Seems a misnomer to have Add a tag when you can't.

On 27 February 2014 14:13, Michael Benford notifications@github.com wrote:

Hi @stevelorimer https://github.com/stevelorimer.

The directive doesn't limit the number of tags that can be added; it simply becomes invalid when the max-tags option is reached.

Kind regards.

Reply to this email directly or view it on GitHubhttps://github.com/mbenford/ngTagsInput/issues/88#issuecomment-36205982 .

[mbenford]

There must be something else preventing you from adding the tag. Perhaps the tag you're trying to create contains some invalid character (by default only alphanumeric chars are allowed).

Take a look at this Plunker script. Even though max-tags is set to 3 I can create as many tags as I want.

[steve-lorimer]

You're right - I was entering a duplicate tag mashing my keyboard! Duplicate tags are not added.

Are you against stopping further input if max-tags is reached?

On 27 February 2014 14:45, Michael Benford notifications@github.com wrote:

There must be something else preventing you from adding the tag. Perhaps the tag you're trying to create contains some invalid character (by default only alphanumeric chars are allowed).

Take a look at this Plunker scripthttp://plnkr.co/edit/F8BTr6TCAVQQfeHoy2Yy?p=preview. Even though max-tags is set to 3 I can create as many tags as I want.

Reply to this email directly or view it on GitHubhttps://github.com/mbenford/ngTagsInput/issues/88#issuecomment-36207412 .

[mbenford]

I wanted to make the directive behave like Angular's built-in validation directives (ngRequired, 'ngiMinlength,ngPattern` etc). They don't prevent the user from entering any data; they just mark the element as valid or invalid.

In case you want to limit how many tags can be added, you can extend ngTagsInput behavior by writing a simple directive (this only works when using the code on master):

.directive('limitTags', function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel) {
            var maxTags = parseInt(attrs.maxTags, 10);
            ngModel.$parsers.unshift(function(value) {
                if (value && value.length > maxTags) {
                    value.splice(value.length - 1, 1);
                }
                return value;
            });
        }
    };
});

Now you can use it like this:

<tags-input ng-model="tags" max-tags="3" limit-tags></tags-input>

That's only possible because ngTagsInput complies with ngModelController so multiple directives can manipulate the same model.

Kind regards.

[steve-lorimer]

This is great, thanks for the suggestion Michael!

On 28 Feb 2014, at 1:06 am, Michael Benford notifications@github.com wrote:

I wanted to make the directive behave like Angular's built-in validation directives (ngRequired, 'ngiMinlength,ngPattern` etc). They don't prevent the user from entering any data; they just mark the element as valid or invalid.

In case you want to limit how many tags can be added, you can extend ngTagsInput behavior by writing a simple directive (this only works when using the code on master):

.directive('limitTags', function() { return { require: 'ngModel', link: function(scope, elem, attrs, ngModel) { var maxTags = attrs.maxTags; ngModel.$parsers.unshift(function(value) { if (value && value.length > maxTags) { value.splice(value.length - 1, 1); } return value; }); } };});

Now you can use it like this:

That's only possible because ngTagsInput complies with ngModelController so multiple directives can manipulate the same model.

Kind regards.

Reply to this email directly or view it on GitHubhttps://github.com/mbenford/ngTagsInput/issues/88#issuecomment-36244535 .

[kevinrenskers]

My solution:

tags-input.has-tags input {
    display: none;
}

<tags-input ng-class="{'has-tags': myModel.length}" ng-model="myModel.length">

[7Prasanna]

i have used kevinrenskers solution .. working fine.. thnx

[zardaloop]

I have used kevinrenskers solution and modified it a little bit to work with version 3.1.1

tags-input.has-tags .tags .input {
    display: none !important;
}

tags-input.has-tags .tags ul {
    height: 26px;
}

<tags-input ng-class="{'has-tags': myModel.length > 0 }" ng-model="myModel.length">

[sajithk]

My solution based on kevinrenskers solution and directive's maxTags parameter (maxTagsAllowed should be one less than required tags count),

  tags-input.ng-invalid-max-tags .tags{
    cursor: default !important;
  }  
  tags-input.ng-invalid-max-tags .tags .input {
    display: none !important;
  }  

<tags-input max-tags="maxTagsAllowed" ng-model="myModel.length">