Check duplicate values for a text filed in Angular form

Question

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 ?

hassassin · Accepted Answer · 2014-01-28 23:10:53Z

1

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!

edited Jan 28, 2014 at 23:10

answered Jan 28, 2014 at 18:30

hassassin

5,0641 gold badge32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

runtimeZero Over a year ago

Hassassin.. if I use tooltip directive i cannot use isolate scopes..here's the error that i get :Error: [$compile:multidir] Multiple directives [checkDuplicateName, tooltip] asking for new/isolated scope on: <input type="text" ng-model="user.name" >

Collectives™ on Stack Overflow

Check duplicate values for a text filed in Angular form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related