verify email is already used or not angularjs - angularjs

Question

I start with angularJS and I want to check if the email entered in the form already exists or not . for that, I will use RESTto communicate withe back_end.My problem is : how to check email before sending the form with a directive and display an error message if the email is already used.
<form name="registrationForm">
<div>
<label>Email</label>
<input type="email" name="email" class="form-group"
ng-model="registration.user.email"
ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,8})$/"
required compare-to="registration.user.email"
/>
the model
demoApp.directive('existTo', [function () {
return {
require: "ngModel",
scope: {
otherModelValue: "=existTo"
},
link: function(scope, element, attributes, ngModel) {
ngModel.$validators.existTo = function(modelValue) {
return modelValue == scope.otherModelValue;
};
scope.$watch("otherModelValue", function() {
ngModel.$validate();
});
}
}; }]);
back_end checkmail: the controller
demoApp.controller('signupCtrl',function($scope,$http) {
$scope.verficationEmail = function(mail) {
$scope.test = mail;
var urll="";
var test="";
$scope.urll="http://localhost:8080/app/personne/verifmail?msg=";
$scope.aplrest=$scope.urll+$scope.test;
var ch3=$scope.aplrest;
$http.post(ch3).
success(function(respons) {
$scope.data = respons;
$scope.valid = respons.valid;
if ( $scope.valid == "false") {
$scope.msgalert="mail used";
}
})
};});
thank you in advance for your assistance

Answer 1

You will most likely want to put the verficiation function in a service and inject it wherever it's needed:
demoApp.factory('verifyEmail', function() {
return function(mail) {
var test=mail;
var urll="http://localhost:8080/app/personne/verifmail?msg=";
var aplrest=urll+test;
var ch3=aplrest;
return $http.post(ch3)
};
});
Then...
In your directive:
demoApp.directive('existTo', ["$q","verifyEmail",function ($q, verifyEmail) {
return {
require: "ngModel",
scope: {
// This is probably not needed as ngModel's
// validators will pass the current value anyway
otherModelValue: "=existTo"
},
link: function(scope, element, attributes, ngModel) {
// Note the change to $asyncValidators here <-------------
ngModel.$asyncValidators.existTo = function(modelValue) {
var deferred = $q.defer()
verifyEmail(modelValue).then(function(respons){
deferred.resolve(respons.valid);
});
return deferred.promise
};
scope.$watch("otherModelValue", function() {
ngModel.$validate();
});
}
}; }]);
In your controller:
demoApp.controller('signupCtrl',function($scope,$http,verifyEmail) {
$scope.verficationEmail = function (mail) {
verifyEmail(mail).success(function(respons) {
$scope.data = respons;
$scope.valid = respons.valid;
if ( $scope.valid == "false") {
$scope.msgalert="mail used";
}
});
}
});
Also, in your html you dont seem to be actually using the directive exist-to, I'm guessing that's what compare-to should have been. But, in any case, it might look like this:
<input type="email" name="email" class="form-group"
ng-model="registration.user.email"
ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,8})$/"
required exist-to
/>
Note that there's no need to pass the model value to the directive
Hope that helps.