カスタム ユーザー名バリデーターに asyncvalidator を追加しようとしています。ただし、次のエラーが出力されます。
TypeError: 未定義のプロパティ 'username' を設定できません。
asyncvalidator を定義するにはどうすればよいですか? NgModel コントローラーによって自動的に実行されると思いましたか?
<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);
}
}
});
}
}
}])