AngularJS Directive for checking if email already used - angularjs

Question

I follow a solution for checking if a username is already present in the DB: defined in this topic angularjs: custom directive to check if a username exists
I put that in practice for checking if an email already exists in the DB. In my application a user can register until 5 emails.
When the user enters an email in the field, the query is correctly executed for checking if the email is already used in the database.
Some error messages have been implemented when the email format is not correct.
A message should be equally displayed when the email is already used (so present in the DB) but I have some problems for doing that (with the 5 fields for email addresses)
Here my controller:
// MY DIRECTIVE FOR CHECKING IF EMAIL IS ALREADY USED
app.directive('emailAvailable', function($timeout, $q, $http, ContactService) {
return {
restrict: 'AE',
require: 'ngModel',
link: function(scope, elm, attr, model) {
model.$asyncValidators.emailExists = function() {
email= elm.val();
return ContactService.searchContactByEmail(email).success(function(contact){
$timeout(function(){
if(contact.length >0){
model.$setValidity('emailExists', contact);
//model.$setValidity('unique', false); // For validation criteria in the form
scope.emailAlreadyExist='true';
scope.contacts = contact;
// THE VALUE IS CORRECTLY DISPLAYED IN THE CONSOLE
console.log("exist : " + scope.emailAlreadyExist);
}else{
model.$setValidity('emailExists', contact);
//model.$setValidity('unique', true); // For validation criteria in the form
scope.emailAlreadyExist='false';
scope.contacts = null;
// THE VALUE IS CORRECTLY DISPLAYED IN THE CONSOLE
console.log("exist : " + scope.emailAlreadyExist);
}
}, 600);
});
};
}
}
});
app.controller('ctrlAddContacts', function ($scope, ContactService){
$scope.title="Add a contact";
$scope.edit_oldContact = "false";
// ALLOW TO HAVE SEVERAL EMAILS
$scope.emails = [
{
}];
$scope.log = function() {
console.log($scope.emails);
};
$scope.add = function() {
var dataObj = {email:''};
$scope.emails.push(dataObj);
}
.........
});
Here my Factory:
app.factory('ContactService', function($http){
var factory={};
// CALL COLDFUSION FUNCTION
factory.searchContactByEmail=function(string){
if (string){
chaine='http://myapp/contacts.cfc?method=searchContactByEmail&contactEmail=' + string;
}else{
chaine='';
}
return $http.get(chaine);
};
return factory;
})
Here my Template:
<! --------------------------- MANAGE MAILS --------------------------->
<div ng-repeat="(key, email) in emails | limitTo : 5">
<div class="form-group">
<span ng-switch="$index">
<label ng-switch-when="0" for="txtEmail" class="col-sm-2 control-label">Main email</label>
<label ng-switch-default for="txtEmail" class="col-sm-2 control-label">Email {{$index+1}}</label>
</span>
<div class="col-sm-9" ng-switch="$index">
<input ng-switch-when="0" type="email" class="form-control"
name="txtEmail_{{$index}}" maxlength="100" placeholder="Enter main email"
required
ng-model="contact.EMAIL"
email-available
>
<input ng-switch-default type="email" class="form-control"
name="txtEmail_{{$index}}" maxlength="100" placeholder="Enter Email {{$index+1}}"
required
ng-model="contact['EMAIL_'+$index]"
email-available
>
<!-- THE VALUE emailAlreadyExist IS NOT DISPLAYED IN THE PAGE -->
<p>txtEmail_{{$index}} : {{emailAlreadyExist}}</p>
<! ----------------- Display the message when the email is already used ----------------->
<div ng-show="ContactForm['txtEmail_' + $index].$dirty && emailAlreadyExist=='true' " class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Email is already used
</div>
<div ng-if="ContactForm['txtEmail_' + $index].$pending.emailExists">checking....</div>
<! ----------------- Display the message when the email is already used ----------------->
<div class="error-container"
ng-show="ContactForm['txtEmail_' + $index].$dirty && ContactForm['txtEmail_' + $index].$invalid">
<div ng-show="ContactForm['txtEmail_' + $index].$error.email" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
That is not a valid email. Please input a valid email.
</div>
<div ng-show="ContactForm['txtEmail_' + $index].$error.required" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Your email is required.
</div>
<div ng-show="ContactForm['txtEmail_' + $index].$error.minlength" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Your email is required to be at least 3 characters
</div>
<div ng-show="ContactForm['txtEmail_' + $index].$error.maxlength" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Your email cannot be longer than 20 characters
</div>
</div>
</div>
<div class="col-sm-1" ng-show="$index == 0">
<a href="" ng-click="add()" ng-show="emails.length<5" class="inline btn btn-primary icon_email">
<span class="glyphicon glyphicon-plus icon2"></span><span class="addButton">Add</span>
</a>
</div>
</div>
</div>
<! --------------------------- MANAGE MAILS --------------------------->
Could you tell me how to update the script (of the directive I suppose) for displaying the message Email is already used ?
Thanks in advance for your help.

Answer 1

Please try below directive :
// MY DIRECTIVE FOR CHECKING IF EMAIL IS ALREADY USED
app.directive('emailAvailable', function($timeout, $q, $http, ContactService) {
return {
restrict: 'AE',
require: 'ngModel',
link: function(scope, elm, attr, model) {
model.$asyncValidators.emailExists = function() {
email= elm.val();
return ContactService.searchContactByEmail(email).success(function(contact){
$timeout(function(){
if(contact.length >0){
model.$setValidity('emailExists', true);
//model.$setValidity('unique', false); // For validation criteria in the form
scope.emailAlreadyExist='true';
scope.contacts = contact;
// THE VALUE IS CORRECTLY DISPLAYED IN THE CONSOLE
console.log("exist : " + scope.emailAlreadyExist);
}else{
model.$setValidity('emailExists', false);
//model.$setValidity('unique', true); // For validation criteria in the form
scope.emailAlreadyExist='false';
scope.contacts = null;
// THE VALUE IS CORRECTLY DISPLAYED IN THE CONSOLE
console.log("exist : " + scope.emailAlreadyExist);
}
}, 600);
});
};
}
}
});
and in template make following changes :
<! ----------------- Display the message when the email is already used ----------------->
<div ng-show="ContactForm['txtEmail_' + $index].$dirty && YOUR_FORM_NAME.$error.emailExists" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Email is already used
</div>
<div ng-if="ContactForm['txtEmail_' + $index].$pending.emailExists">checking....</div>
<! ----------------- Display the message when the email is already used ----------------->