AngularJS 用于检查电子邮件是否已被使用的指令

Question

我遵循检查用户名是否已存在于数据库中的解决方案：在本主题中定义

我将其付诸实践以检查数据库中是否已存在电子邮件。在我的应用程序中，用户最多可以注册 5 封电子邮件。当用户在该字段中输入电子邮件时，将正确执行查询以检查该电子邮件是否已在数据库中使用。

当电子邮件格式不正确时，一些错误消息已经实现。当电子邮件已被使用（因此存在于数据库中）时，应该同样显示一条消息，但我在这样做时遇到了一些问题（电子邮件地址的 5 个字段）

这里我的控制器:

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

    .........
});

这里我的工厂:

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;

})

这里我的模板:

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

你能告诉我如何更新脚本（我想是指令的）来显示消息 Email is already used 吗？

在此先感谢您的帮助。

Answer 1

请尝试以下指令：

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

并在模板中进行以下更改：

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

AngularJS 用于检查电子邮件是否已被使用的指令

AngularJS Directive for checking if email already used

angularjs

email

coldfusion

directive