проверка электронной почты уже используется или нет angularjs

Question

Я начинаю с angularJS, и я хочу проверить, существует ли электронное письмо, введенное в форму, или нет. для этого я буду использовать RESTto для связи withe back_end.Мой проблемой является: как проверить электронную почту перед отправкой формы с директивой и отобразить сообщение об ошибке, если письмо уже используется.

<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"    
      /> 

модель

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: контроллер

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"; 
      } 
     }) 
};}); 

спасибо заранее за помощь

Answer 1

Вы, скорее всего, хотите поставить функцию verficiation в услугу и вводить ее там, где это необходимо:

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) 
    }; 
}); 

Тогда ...

В вашей директиве:

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(); 
     }); 
    } 
}; }]); 

В контроллере:

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"; 
      } 
     }); 
    } 
}); 

Кроме того, в вашем HTML вы не делаете , кажется, на самом деле, используя директива exist-to, я предполагаю, что это то, что должно было быть compare-to. Но, в любом случае, это может выглядеть следующим образом:

<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    
     /> 

Обратите внимание, что нет необходимости передавать значение модели в директиве

Надежда, что помогает.