Search Posts

Directive in Angularjs for checking if email already exists

I follow a solution for checking if an email is already present in the DB: defined in this topic angularjs: custom directive to check if a username exists

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. The query returns the persons with the same email in JSON Format

My problem is that the results (data on persons) are not retrieved in the scope.

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(con){
                    $timeout(function(){
                    if(email.length >0){
                        if(con.length >0){
                            model.$setValidity('emailExists', false);
                            scope.emailAlreadyExist='true';
                            scope.con = con; 
                            console.log('NB: ' + scope.con.length); // IT'S WORKING
                            console.log("email exist: " + scope.emailAlreadyExist); // IT'S WORKING TOO                         
                        }else{
                            model.$setValidity('emailExists', true);
                            scope.emailAlreadyExist='false';    
                            scope.con = null;       
                            alert('jjjjj' + con);

                            console.log("email NOT EXIST : " + scope.emailAlreadyExist);                            
                        }
                    }
                    }, 1000);
                });

            };
        }
    } 
});


app.controller('ctrlAddContacts', function ($scope, MyTextSearch, ContactService){
    MyTextSearch.setValue('');
    $scope.title="Add a contact";   
    $scope.edit_oldContact = "false";       
    $scope.emailAlreadyExist = 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 --> GET JSON RESULTS ON PERSONS DATA     
        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**
    <div ng-repeat="(key, email) in emails | limitTo : 5" style="z-index:6">

      <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"
            ng-model="contact.EMAIL"
            email-available emailexist = "emailAlreadyExist " > 


            <input ng-switch-default type="email" class="form-control" 
            name="txtEmail_{{$index}}" maxlength="100" placeholder="Enter Email {{$index+1}}" 
            ng-model="contact['EMAIL_'+$index]" 
            email-available emailexist = "emailAlreadyExist " >     

            <!--------------------- PROBLEM FOR DISPLAYING THE CONTACTS PERSON WITH THE EMAIL --------------------- START --------------------->
            {{con}} 
            <!--------------------- PROBLEM FOR DISPLAYING THE CONTACTS PERSON WITH THE EMAIL ---------------------- END ---------------------->

            <div ng-show="ContactForm['txtEmail_' + $index].$dirty && ContactForm['txtEmail_' + $index].$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>
                This email is already used <!--- CORRECTLY DISPLAYED WHEN THE EMAIL IS ALREADY USED IN THE DB --->

                <!--------------------- PROBLEM FOR DISPLAYING THE CONTACTS PERSON WITH THE EMAIL --------------------- START --------------------->
                <ul id="contacts_list">
                    <li ng-repeat=" contact in con" style="position:relative; z-index:25">
                        <div angular-popover direction="right" template-url="template/popover.html" mode="mouseover">
                            <a href="#/view-contacts/{{contact.id}}">{{ contact.lastname }} {{ contact.firsttname }}</a> 
                        </div>
                    </li>
                </ul>
                <!--------------------- PROBLEM FOR DISPLAYING THE CONTACTS PERSON WITH THE EMAIL ---------------------- END ---------------------->
            </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>

Could you please help me for solving this problem

Source: AngularJS

1 comment on Directive in Angularjs for checking if email already exists

Leave a Reply

Your email address will not be published. Required fields are marked *