CODEWITHSUNDEEP
angularjsangularjs-directive
runtimeZero
runtimeZero

Reputation: 28076

Check duplicate values for a text filed in Angular form

Folks,

I have a text-field in a form. When a user enters a value in this text field, I would like to check it against a array of values to ensure this value doesn't already exists. I started off writing a directive and since I am new to this I am quiet lost

<input type="text" ng-model="user.name" placeholder="Enter Name" required checkDuplicateName existing-names="allUsers" tooltip/>

I the above code allUsers looks like this

var allUsers = ['john','james','Tim'];

My directive is as follows:

angular.module('formInputs').directive('checkDuplicateName', function() {
  return {
    restrict : 'A',
    require : 'ngModel',
    link:  function(scope, element, attrs, ctrl) {
      scope.$watch(attrs.ngModel,function(){
        for (var i =0; i<attrs.existing-names.length;i++) {
           if (attrs.existing-names[i] === attrs.ngModel) {
             attrs.$set('tooltip','Name already exsists');
             return;
           }
        }
      });
    }
  }

});

The problem I am having is that the directive is not getting fired. What am i missing here ?

Upvotes: 0

Views: 3422

Answers (1)

hassassin
hassassin

Reputation: 5054

I've created a fiddle here that has a working version of your idea. It was just a couple small things, it doesn't look like you are passing your data correctly. When you access attrs it just gives you the string that is in the markup so attrs.ngModel will just give you "users.name" as a string.

I created an isolate scope so that you can see the scoping.

  scope: {
      model: '=ngModel',
      users: '=existingNames'
  },

Also, angular turns this-case-in-html into camel case in the js like: thisCaseInHtml

Edit: if you don't want to isolate scope, that's fine too. You just need to be evaluating the strings on the scope instead.

Here's an updated fiddle http://jsfiddle.net/ddJ4Z/10/ with the changes. Notice how the values are evaluated on the scope.

scope.$watch(attrs.ngModel,function(newVal){
    var users = scope.$eval(attrs.existingNames) || [];
    for (var i =0; i<users.length;i++) {
       if (users[i] === newVal) {
           window.alert(newVal);
         return;
       }
    }
  });

Hope this helps!

Upvotes: 1

Related Questions