angular form validation inside callback function - angular 1.2.5

Viewed 1638

I'm working an application with indexedDb as storage. In one of the forms while checking for the existence of a key I'm facing a strange error. Below is my validation directive code

app.directive('ensureUnique',['abcService', function ($abcService){
return {
    require : 'ngModel',
    link : function(scope,elem,attr,ctrl) {
        scope.$watch(attr.ngModel, function(){
             var checkExpenseType = $abcService.checkExpenseType();
             var index = checkExpenseType.get(scope.newExpenseName );
             index.onsuccess = function (e) {
                var result = e.target.result;
                if(result) {
                    ctrl.$setValidity('exists', true);
                 }else{
                    ctrl.$setValidity('exists', false);
                 }
             };
             index.onerror = function(e) {
                // TODO
             };   
        });
    }, 
  }}
]);

While entering input text if the value matches the key in db for the first time proper error message is displayed. Upon next key press error vanishes which is the correct behavior but for subsequent keypresses error reappears even though key is not present in DB.

 For example if "Food"  is the key in DB
 Foo - No error
 Food - Error - Key exists
 Foods - No error
 Foodss - Error - key exists
 Foodsss - Error - key exists
 ...       

Since there is a min length criteria of 3 characters directive is not triggered till I enter 3 characters.

Please also let me know if I'm doing the validation in the intended way or a better way exists

Thanks in advance

1 Answers
Related