Maximum tags option for tags-input

[mbenford]

Tags input could have a max-tags option in order to limit the number of tags that can be added.

[ludar]

Would be a cool feature.

[richardwilly98]

+1

On Monday, December 9, 2013, ludar wrote:

Would be a cool feature.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/24#issuecomment-30153300
.

[jrencz]

@richardwilly98 @ludar look at #40

[mbenford]

I'm not quite sure how this feature should be implemented. I mean, I can think of two approaches:

• Prevent new tags from being added when the limit is reached (as @jrencz did);
• Allow new tags to be added without restriction, but make the element invalid when the limit is surpassed (by using ngModelController).

The first approach is straightforward but doesn't provide the user with any feedback; she may not know at a glance why she can't add more tags.

The second one aligns with Angular guidelines for "data-bound controls" and makes ngTagsInput similar to a regular input field. It also enables other validations, like making the element invalid when there's not enough tags or when there's some leftover text in the input box. But since this approach doesn't prevent the user from adding more tags than she should, it'll be up to the developer to come up with a feedback message based on the element status.

I like the second approach better, but I'd like to hear from you guys.

[jrencz]

The second approach looks fine.
I added the first just to meet my own very selfish requirement of my backend: no more than x tags.
What's you suggest is just to mark form as invalid and then One can decide if to send data back to server or not in controller.
What I meant to do was to disable input after confirming last tag and not allow user to enter any more. But I wasn't able to use ngDisabled somehow: it was either always enabled if there were less tags than limit initially or always disabled (even though I deleted some of tags) if it was on the limit initially
Maybe testing against form $invalid would do. I'll try

[mbenford]

I guess that disabling the input will prevent the user from removing/editing the last tag by pressing the backspace key, won't it?

[jrencz]

Agreed. But it's the simplest way. More complex would be to handle keypress and react only to backspace. It'll improve user experience. Thank you for mentioning that.
There can also be some callback called on any other key pressed. It can be used to give some feedback to user, let them know that limit is reached. How do you like it?