Angularjs - Checking duplicated email on blur in directive - angularjs

Question

I ran into a problem when I want to check whether the mail has been registered or not in the db, but only on the blur event ( I dont want it to check on every change ). So I wrote a directive that I can re-use in other places in my app. But the problem is the directive keeps checking even when I still not blur out, Here is my plnkr for reference: http://plnkr.co/edit/eUPFxIc78Wkl4mCX6hrk?p=preview
And here is my directive code:
app.directive('checkEmail', function(userService){
return{
restrict: "A",
require:'ngModel',
link: function( scope, ele, attrs, ctrl ){
ele.bind('blur', function(){
console.log("Run in blur!");
ctrl.$parsers.unshift(function( email ){
console.log("Email is ", email);
// Checking to see if the email has been already registered
if( ele.val() && userService.isDuplicateEmail(email) ){
ctrl.$setValidity('isDuplicatedEmail', true );
}else{
ctrl.$setValidity('isDuplicatedEmail', false );
}
});
})
}
}
})
Sorry I'm new to angular and this simple task already drives me nuts. PLease take a look at my directive and tell me what I can do to fix this problem. Thanks in advance

Answer 1

Please see here for working sample http://plnkr.co/edit/lT9kO4nU0OeBG3g8lULG?p=preview
Please don't forget to add scope.$apply to update your UI
app.directive('checkEmail', function(userService) {
return {
restrict: "A",
require: 'ngModel',
link: function(scope, ele, attrs, ctrl) {
ele.bind('blur', function() {
scope.$apply(function() {
console.log("Run in blur!");
// Checking to see if the email has been already registered
if (userService.isDuplicateEmail(scope.email)) {
ctrl.$setValidity('isDuplicatedEmail', false);
return scope.email;;
} else {
ctrl.$setValidity('isDuplicatedEmail', true);
return scope.email;
}
});
})
}
}
})

Answer 2

$parser.unshift is executed when the model changes, but you really wanted "blur",... either check ngModelOptions' "updateOn" or remove unshift...
you can also use ctrl.$viewValue.
ele.bind('blur', function(){
console.log("Run in blur!");
//ctrl.$parsers.unshift(function( email ){
email = ctrl.$viewValue;
console.log("Email is ", email);
// Checking to see if the email has been already registered
if( !!email && userService.isDuplicateEmail(email) ){
ctrl.$setValidity('isDuplicatedEmail', true );
return email;;
}else{
ctrl.$setValidity('isDuplicatedEmail', false );
return email;
}
//});
})

Answer 3

#ryeballar , sorry but this still doesn't look right to me. I've modified your plnk so that it just works on the async. So the confusion I have is this line
ctrl.$setValidity('isDuplicatedEmail', !hasEmail);, you can visit new plnk here
That boolean value doesn't seems to be right if I dont put a "!" before, you can check it in the console log and see its value, like when an email is not duplicated, the service return false, then we set the validity to "TRUE" in order to make it look "RIGHT".
Here is the directive:
elem.bind('blur', function() {
ctrl.__CHECKING_EMAIL = true;
userServiceAsync.isDuplicateEmailAsync(ctrl.$viewValue).then(function(hasEmail) {
console.log("hasEmail: ", hasEmail);
console.log("!hasEmail: ", !hasEmail);
scope.hasEmail = hasEmail;
// HERE IS THE CONFUSION, WHY !hasEmail works correctly ????
// THIS WILL GIVE THE WRONG ANSWER
// ctrl.$setValidity('isDuplicatedEmail', hasEmail);
// THIS WILL GIVE THE RIGHT ANSWER
ctrl.$setValidity('isDuplicatedEmail', !hasEmail);
})['finally'](function() {
ctrl.__CHECKING_EMAIL = false;
});
});

Answer 4

If you only need to check the email when blurred, then you don't need to pass it inside the ng-model's $parsers array. Simply change the validity when it is blurred.
DEMO
Something like this:
ele.bind('blur', function(){
ctrl.$setValidity('isDuplicatedEmail', ctrl.$viewValue && userService.isDuplicateEmail(ctrl.$modelValue));
scope.$digest();
});
Alternatively, if you are checking the email asynchronously from a server then this may not work in to your advantage. The following example is a better answer:
DEMO
The service below, requests for a list of emails from the server and resolving the promises whether the email exists(true) or not(false).
app.service('userServiceAsync', function($http, $q) {
this.isDuplicateEmailAsync = function(email) {
var deferred = $q.defer(), i;
$http.get('users.json')
.success(function(users) {
for(i = 0; i < users.length; i++) {
if(users[i].email == email) {
deferred.resolve(true);
return;
}
}
deferred.resolve(false);
})
.error(function() {
deferred.resolve(false);
});
return deferred.promise;
};
});
The directive below, sets the isDuplicatedEmail validity key to true or false, depending on the resolved value of the userServiceAsync.isDuplicateEmailAsync () method. As a bonus, I added a determinant key within the ngModelController's object to check if the asynchronous request is still on going or not (using the __CHECKING_EMAIL key).
app.directive('checkEmailAsync', function(userServiceAsync) {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ctrl) {
elem.bind('blur', function() {
ctrl.__CHECKING_EMAIL = true;
userServiceAsync.isDuplicateEmailAsync(ctrl.$viewValue).then(function(hasEmail) {
ctrl.$setValidity('isDuplicatedEmail', !hasEmail);
})['finally'](function() {
ctrl.__CHECKING_EMAIL = false;
});
});
}
}
});
HTML
Check Email Asynchronously
<input type="text" name="emailAsync" placeholder="Email" ng-model="emailAsync" check-email-async required />
<div ng-show="registerForm.emailAsync.__CHECKING_EMAIL">
Checking Email...
</div>