Do I have to create a directive to use $asyncValidators - angularjs

Question

I created this code:
<input class="inputField"
id="registerUserName"
name="registerUserName"
ng-model="aus.registerUserName"
ng-model.$asyncvalidators.unique="aus.isUsernameAvailable";
ng-model-options="{ debounce: 2000 }"
ng-minlength="5"
ng-required="true"
placeholder="Username"
type="text"
value="" />
isUsernameAvailable = function {
return true;
}
But it seems my validator is not getting called. All the examples I see create a directive for the asyncvalidators. Is it possible to do it without creating a directive like I tried?

Answer 1

Yes, you do have to create a directive. The code example that you have shown is sort of attempting to use html in javascript.
You need to access the ng-model controller on the element that you want to validate, which (as far as I know) you can only do by creating another directive and using require in the directive definition object.
You could also make a directive that accepts an expression to add to the asyncvalidators a bit like what you are doing there.
It would look something like this: (not tested, probably not working code!)
angular.module('app', [])
.directive('useAsyncValidators', function (){
return {
restrict: 'A',
// you need this line to access ngModel controller (4th arg to link)
require: 'ngModel',
link: function (scope, element, attributes, ngModel) {
// assume we pass an object with validatorname: validatorFunction fields.
validators = scope.$eval( attributes.useAsyncValidators );
for(var validator in validators) {
// check the validator is a function
if typeof validators[validator] === "function"
// set validator on ngModelController
ngModel.$asyncValidators[validator] = validators[validator];
}
}
}
// Which you could then use with the following:
.controller('validateTestController', function ($scope, $timeout) {
delayedValidator = function () {
return $timeout(true, 1000);
};
alwaysTrue = function () {
return true;
};
$scope.validators = {
isNameAvailable: alwaysTrue,
isEmailAvailable: delayedValidator
}
});
Then use the following markup:
<form ng-controller="validateTestController">
<input class="inputField"
ng-model="whatever"
use-async-validators="validators" />
</form>
etc.
This would result in validating the field with a validator called isNameAvailable using the alwaysTrue function, and another on the same field with isEmailAvailable using delayedValidator.
Obivously these validator functions don't make sense really, but hopefully you can see that it's only a few lines of code to make a generic directive that does what you're trying to do in your markup.