angular check for on-blur in directive

Question

I am new to angular js and want to validate a field on blur. As i am entering the value the directive is called and is validating the entered value. i want this to happen on -blur. I have already user on-blur in the html for calling some other function.

Below is the directive :

app.directive("emailCheck", function(){
return {
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) {
        ctrl.$parsers.unshift(function (viewValue, $scope) {
            var emailPattern =  /\S+@\S+\.\S+/;
            var isEmailValid = emailPattern .test(viewValue)
            ctrl.$setValidity('emailFormat', isEmailValid);
            return viewValue;
        })
    }
 };
});

How do i check for on blur event here?

Thanks in advance.

Hadi · Accepted Answer · 2016-05-24 09:30:44Z

2

you should bind blur event to directive. try like this:

link: function (scope, elm, attrs, ctrl) {
    elm.bind('blur',function(){
   }) 
}

var app = angular
  .module('MyApp', [
  ])
.controller('Main', ['$scope', function ($scope) { 

}])
.directive("emailCheck", function(){
return {
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) {
      elm.bind('blur',function(){
        alert("test");
      }) 
    }
 };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl">
      <div>
           <input type="text" ng-model="email" email-check>
     </div>
</div>

edited May 24, 2016 at 9:30

answered May 24, 2016 at 9:23

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Meligy · Accepted Answer · 2016-05-24 09:30:59Z

2

Conventionally, when you use ngModel in your directive, you do not decide what event to hook into. You subscribe to whatever event the ngModel is hooked up to. This is not just blur by default.

The user of your directive can use ngModelOptions with updateOn:blur`` to update only on blur, like:

<input 
    email-check
    name="testEmail" ng-model="testEmail"
    ng-model-options="{ updateOn: 'blur' }">

<!-- Note using "updateOn: 'blur'" NOT "updateOn: 'default blur'" -->

ngModelOptions Docs

answered May 24, 2016 at 9:30

Meligy

36.7k11 gold badges90 silver badges114 bronze badges

Comments

Suneet Bansal · Accepted Answer · 2016-05-24 09:29:19Z

1

You will have to handle blur event inside the directive and remove the same from html element to handle it in the below fashion:

app.directive("emailCheck", function(){
return {
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) {
        elm.on('blur', function() {
           // @TODO you will have to put your code here to handle this event
        });
    }
 };
});

answered May 24, 2016 at 9:29

Suneet Bansal

2,7061 gold badge16 silver badges18 bronze badges

Comments

shashank bisht · Accepted Answer · 2017-07-13 11:39:44Z

0

Try this.

define(['app'],function(app){
app.directive('myDecimals', function() {
   return {
     restrict: 'A',
     link: function(scope, elm, attrs) {

       elm.bind('blur',function(){
           elm.val(elm.val()*1);
       });
     }
   };
 });
 });

answered Jul 13, 2017 at 11:39

shashank bisht

1

Collectives™ on Stack Overflow

angular check for on-blur in directive

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related