CODEWITHSUNDEEP
javascriptangularjs
NVO
NVO

Reputation: 2713

Angular: check value ng-blur

I'm trying to build a form in Angular, but i'm new with it, so I need some help :)

I have a field 'email' which should be checked when the user leave that field. A function in my controller should to check the entered value if it already exist in the database (ajax/http).

I found the 'ng-blur' function and have created a function in my controller to check the email. But, the $scope.user.email is undefined, and I don't known what i'm doing wrong. Can somebody help me?

This is my code so far:

HTML (jade)

p.claim-text Email
abbr.required.claim-text(title='required') *
input#billing_email.input-text.form-control.claim-input(type='email', placeholder='Email', value='', name='email', ng-model='user.email', ng-blur='checkEmail()' required)
p(ng-show="registerForm.email.$invalid && !registerForm.email.$pristine").help-block Invalid emailadres
p(ng-show="emailExists").help-block User exists! Click here to login

Controller function

$scope.checkEmail = function(){
        console.log($scope.user.email);
        $http({
            method: 'GET',
            url: '[someurl]',
            data: $scope.user.email,
        }).then(function successCallback(response){
            //if response is true, set emailExists to true;
        }, function errorCallback(response){

        });

    }

Upvotes: 2

Views: 1895

Answers (2)

Daniel Pham
Daniel Pham

Reputation: 146

You can pass the email to checkEmail function

input#billing_email.input-text.form-control.claim-input(type='email', placeholder='Email', value='', name='email', ng-model='user.email', ng-blur='checkEmail()' required)

Then in controller you just need to get the email from argument 

$scope.checkEmail = function(){
        console.log($scope.user.email);
        $http({
            method: 'GET',
            url: '[someurl]',
            data: $scope.user.email,
        }).then(function successCallback(response){
            //if response is true, set emailExists to true;
        }, function errorCallback(response){

        });

    }

Upvotes: 1

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

Please try this snipped

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope','$http', function($scope, $http) {
  //You can check POST at server side to get the entered email
  $scope.checkEmail = function(email){
  //REMOVE THIS LINE
  console.log(email);return false;
        $http({
            method: 'POST',
            url: '[someurl]',
            data: email,
        }).then(function successCallback(response){
            //if response is true, set emailExists to true;
        }, function errorCallback(response){

        });

    }
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<!--HTML -->
<div ng-app="myApp" ng-controller="GreetingController">
<input type="text" ng-blur="checkEmail(email)" ng-model="email"/>
</div>

OR
<!--JADE -->
input#billing_email.input-text.form-control.claim-input(type='email', placeholder='Email', name='email', ng-model='user.email', ng-blur='checkEmail(user.email)' ng-init="user.email=''" required)

Upvotes: 3

Related Questions