Angular JS custom validation $asyncvalidator is undefined

Question

Trying to add an asyncvalidator to my custom username validator. However it outputs the error:

TypeError: Cannot set property 'username' of undefined.

How to I make asyncvalidator defined? I thought i would have been automatically by the NgModel controller?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
angular.module('myApp.commonDirectives', ['myApp.services']).directive('username', ['UsernameService',function(UsernameService){
	
	return {
		
	    restrict: 'A',
	    require: "ngModel",
	    scope: {
	        hasFocus: "=username"
	        
	    },
	    link: function(scope, element, attrs, ctrl) {
	    
	        scope.$watch('hasFocus', function(hasFocus) {
	            if(angular.isDefined(hasFocus)) {

	                // on blur
	                if(!hasFocus) {
	                    
	                  
	                    ctrl.$validated=false;
	                    ctrl.$asyncValidators.username = function(value){
	                    UsernameService.validate(value)
	                        .then(function(resolvedData) {
	                            if(resolvedData) {
	                          
	                            	ctrl.$validated=true;
	                                ctrl.$setValidity('checking', true);
//	                                ctrl.$setValidity('username', true);
	                            }
	                            else {
	                          
	                            	ctrl.$validated=true;
	                                ctrl.$setValidity('checking', false);
//	                                ctrl.$setValidity('username', false);
	                            }
	                        }
	                     );
	                }
	                }
	                
	                // on focus
	                else {
	                    ctrl.$setValidity('username', true);
	                    ctrl.$setValidity('checking', true);
	                }
	            }
	            
	        });
	    }

	}
}])

asyncValidators is a new feature from angular 1.3

Dieterg
– Dieterg

2014-11-27 07:46:48 +00:00
Commented Nov 27, 2014 at 7:46 — Dieterg
– Dieterg, Commented Nov 27, 2014 at 7:46
^ Incredibly helpful comment....

nikk wong
– nikk wong

2015-07-31 03:10:17 +00:00
Commented Jul 31, 2015 at 3:10 — nikk wong
– nikk wong, Commented Jul 31, 2015 at 3:10

Michael · Accepted Answer · 2014-11-28 13:24:18Z

2

$asyncValidators is available from angularjs 1.3 and above:

https://code.angularjs.org/1.2.27/docs/api/ng/type/ngModel.NgModelController

edited Nov 28, 2014 at 13:24

Michael

3,3345 gold badges27 silver badges37 bronze badges

answered Nov 28, 2014 at 13:05

Srikanth Injarapu

3602 silver badges4 bronze badges

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

Comments

Rahul Sharma · Accepted Answer · 2014-11-17 15:47:12Z

-1

try  something like this :

angular.module('myModule').directive('usernameValidator', function($http, $q) {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            ngModel.$asyncValidators.username = function(modelValue, viewValue) {
                return $http.post('/username-check', {username: viewValue}).then(
                    function(response) {
                        if (!response.data.validUsername) {
                            return $q.reject(response.data.errorMessage);
                        }
                        return true;
                    }
                );
            };
        }
    };
});

answered Nov 17, 2014 at 15:47

Rahul Sharma

4533 silver badges11 bronze badges

1 Comment

user1782673 Over a year ago

All u've done there is copied the example on the ANgular js documentation. I'd like to keep using the Restangular plugin if i can which is abstracted into the UsernameService. Why does my code not work, whislt the above does? Thanks for any help you can provide

Collectives™ on Stack Overflow

Angular JS custom validation $asyncvalidator is undefined

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related