ng-tags-input not working correctly with autocomplete

Question

I'm adding tag by selecting from list (which is populated using $http request). The tag is added but the text which I have typed that remains there with ng-invalid-tag class.

ScreenShots 1) Initially,

2) Typing 3 letters to get HTTP Call.

3) Now after selection of first Skill "Angular Js'.

4) It shows that .input.invalid-tag is enabled. And which doesn't clear the placeholder.

My Input Tag is as below.

<tags-input ng-model="employerMyCandidatesCtrl.skillList" placeholder="Skills..."
    replace-spaces-with-dashes="false"
    add-from-autocomplete-only="true"
    display-property="skillName"
    on-tag-added="employerMyCandidatesCtrl.addTagToSkillData($tag)"
    on-tag-removed="employerMyCandidatesCtrl.removeTagFromSkillData($tag)">
  <auto-complete
    source="employerMyCandidatesCtrl.loadSkillData($query)"
    displayProperty="skillName" debounce-delay="500"
    min-length="3">
  </auto-complete>
</tags-input>

Controller Code is as below.

vm.skillList = [];
vm.loadSkillData = function(query) {
  return EmployerServices.getAllSkillsPromise(query); // $http call.
};

vm.addTagToSkillData = function(tag) {
  if (_.findIndex(vm.skillList, tag) < 0) {
    vm.skillList.push(tag);
  }
};

vm.removeTagFromSkillData = function(tag) {
  var ind = _.findIndex(vm.skillList, tag) > -1 ? vm.skillList.splice(ind, 1) : '';
};

Is any configuration mistake I'm doing?

Answer 1

There are 4 attributes for onTagAdding, onTagAdded, onTagRemoving, onTagRemoved so the basic difference between the attributes ending with adding compared to those ending with added is

Adding suffixed tags are expecting a boolean which when true will be added
or removed based on the tag used. 

But onTagAdded/Removed already adds the tag, before the function is called hence we can do some additional logic or else strip the ng-model of the added value or add back the removed value(not very easy).

Check the below JSFiddle to see the four attributes in action here

I have made a custom service to supply the data, so the final answer to your question will be to use the appropriate attribute (onTagAdding, onTagAdded, onTagRemoving, onTagRemoved) based on your usecase. From the above code, I think we need not write onTagAdded, onTagRemoved since its done automatically.