Skip to content
This repository has been archived by the owner on Nov 22, 2021. It is now read-only.

Maximum tags option for tags-input #24

Closed
mbenford opened this issue Nov 23, 2013 · 7 comments
Closed

Maximum tags option for tags-input #24

mbenford opened this issue Nov 23, 2013 · 7 comments

Comments

@mbenford
Copy link
Owner

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

@ludar
Copy link

ludar commented Dec 9, 2013

Would be a cool feature.

@richardwilly98
Copy link

+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
Copy link

jrencz commented Dec 11, 2013

@richardwilly98 @ludar look at #40

@mbenford
Copy link
Owner Author

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
Copy link

jrencz commented Dec 13, 2013

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
Copy link
Owner Author

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
Copy link

jrencz commented Dec 13, 2013

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?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants