0

I have a setup in which I am calling a directive to check username-availability, but I want it to execute when user click on the input field for adding new username on Registeration(modal). But ng-keyup does not seem to work, can Anyone help what is the issue.

myApp.directive('usernameAvailable',function ($timeout, $q, $http,apiUrl) {
            return {
            restrict: 'AE',
            require: 'ngModel',
            link: function (scope, elm, attr, model) {
                scope.$watch(attr.ngModel, function(uname) {
                    /*Validate user name ajax call*/
                    $http({
                        method: "GET",
                        url: apiUrl+"getUserNameValidated",
                        contentType: "application/json",
                        dataType: "json",
                        timeout: 180000,  //180 sec
                        params: {'username': uname}
                    }).success(function(res){
                        sessionStorage.setItem('unameAvailability',res.msg);
                        $timeout(function(){
                            if(res.msg=="Success"){
                                model.$setValidity('usernameExists', true);
                            }else{
                                model.$setValidity('usernameExists', false);
                            }
                        }, 1000);
                    }).error(function (x, t, m) {
                        swal("Error connecting to server");
                        if (t === "timeout") {
                            swal("timeout");
                        } else {
                            //alert(t);
                        }
                    });
                });

            }
        }
    });

<div class="col-md-5">
  <input type="text" name="userName"
         ng-model="registerAppCtrl.registerAppDetails.user.uname" 
         id="reg-uname" class="form-control" tabindex="5"
         placeholder="User Name" username-available />

 </div>

It is no way related to validation, it is related to calling directive based on some condition( if it is one of the ways).

I hope people get it.

nightfury
  • 384
  • 6
  • 18
  • Use the [ngModelController `$asyncValidators` API](https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$asyncValidators) which handles asynchronous validation, such as making an `$http` request to the backend. Functions added to the object must return a promise that must be resolved when valid or rejected when invalid. In-progress async validations are stored by key in ngModelController.$pending. For more information, see [AngularJS Developer Guide - Forms (Custom Validation)](https://docs.angularjs.org/guide/forms#custom-validation). – georgeawg May 08 '17 at 04:08
  • I think the answer to you question can be found in this SO link http://stackoverflow.com/questions/27760375/angularjs-access-event-inside-custom-directive-using-element-bindinput – Nair Athul May 08 '17 at 03:53
  • @georgeawg - It is no way related to validation, it is related to calling directive based on some condition( if it is one of the ways). – nightfury May 08 '17 at 06:32
  • @georgeawg - I want the normal onkeyup event to trigger (in angular) - which I am unable to that is why - I asked it here -- it not related to the one you are referring or I am not able to understand the whole thing - I am new to angular. – nightfury May 08 '17 at 10:06

0 Answers0