ng-change directive not working with tags-input

[mazurroman]

<tags-input ng-model="tags" ng-change="onChange()"></tags-input>

The onChange() method is not called when the "tags" model changes.

[alexanderjeurissen]

the reason your callback method isn't working is because you put the ng-change directive on the tags-input directive as a whole while i assume you want to target the tag collection or the underlying input field.

the template of the tags-input looks something like this (it's not 100% accurate but you'll get the idea)

<div>
    <div id="tag collection">
        <ul>
            <li id="tag1">
            <li id="tag2">
        </ul>
    </div>
   <input id="inputField" />
</div>

so basicly you add a ng-change directive to a div and thus your function will never be called.

In case you want to have a callback whenever a new tag is added you should use the on-tag-added directive. like this:

<tags-input on-tag-added="onChange()"></tags-input>

you can find more information about this in the documentation:
http://mbenford.github.io/ngTagsInput/documentation

[mazurroman]

Thanks for the response, I can go with the on-tag-added, however the ng-change would be nicer for me. I am thinking of it like the ng-change is not related to the input element, but rather to the model itself. And so if I can attach ng-model to the tags-input, I would also like to be able to attach the ng-change directive, which should be called on each model change.

It is probably rather an feature than a bug. I think it would be possible to accomplish this through manual ngModel updates using $setViewValue().

[alexanderjeurissen]

a solution you could use in the meantime is adding a $watchCollection listener on the ng-model variable. for example if you use a $scope variable named tags as ng-model for the tagsInput directive:

<tags-input ng-model="tags"></tags-input>

angular.module('app_module')
  .controller('appCtrl', ['$scope',
    function ($scope) {
      $scope.tags = [];
      $scope.$watchCollection('tags', function () {
        // tag collection changed, do stuff here
      });
    }
  ]);

[mbenford]

Another solution would be to use both onTagAdded and onTagRemoved with the same handler:

<tags-input ng-model="tags" 
            on-tag-added="tagChanged()" 
            on-tag-removed="tagChanged()">
</tags-input>

[mazurroman]

@mbenford @alexanderjeurissen thank you guys, I have solved my issue for now. However, it would be great to add support for ng-change, as I said, so I can update my code in the future for better readability and understandability.

[mbenford]

Closing due to inactivity.

[LoganBarnett]

I have a use case where I want to see what the current value of the input text is so I can provide specific validation errors to the user ("The @ character isn't allowed", "That tag already exists", etc). There might be better ways to go about this than an on-input-changed event, but it seems like this satisfies my use-case and potentially others as well. I'll have a PR momentarily. Thanks for the awesome directive!

[robtcallahan]

For whatever reason, the on-tag-added and on-tag-removed is not working. Here is my html:

    <tags-input ng-model="server.ldapUserGroups"
                class="col-lg-12"
                key-property="name"
                display-property="name"
                placeholder="Add a group"
                length="50"
                on-tag-added="checkFields('groups');"
                on-tag-removed="checkFields('groups');"
                add-from-autocomplete-only="true">
        <auto-complete
               source="loadLdapUserGroups($query)"
               display-property="name">
        </auto-complete>
    </tags-input>

what am I doing wrong?

[LoganBarnett]

@robtcallahan do you have a plunkr demonstrating this? At a glance this looks ok.

[Uncle-Bens]

how a can watch current printing tag?

[fresjitendra]

i have faced same issue so you can use ngKeyup instead of ngChange .it will work fine

[obahareth]

I tried making a simple example based on this comment I'm having issues with these as well, they always seem to lag behind, I am always getting the ngModel how it was before the latest event, it looks like this event happens before the ngModel is updated.

Here's how my code looks like

<tags-input ng-model="firstCtrl.tags" 
            on-tag-added="otherCtrl.tagChanged(tags)" 
            on-tag-removed="otherCtrl.tagChanged(tags)">
</tags-input>

I'm trying to get the list of tags to stay updated on another controller.

[vidstige]

@obahareth I was able to solve this by removing use-strings="true". It's marked as "experimental" after all.