Indeed, it is necessary to create a directive for this purpose. The current code snippet appears to be mixing HTML within JavaScript.
In order to validate the element using the ng-model controller, you will need to create a separate directive and utilize the require property in the directive definition object.
You could also develop a directive that accepts an expression to include in the asyncvalidators, similar to your current approach.
A potential implementation could resemble the following (please note that this code has not been tested):
angular.module('app', [])
.directive('useAsyncValidators', function (){
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attributes, ngModel) {
validators = scope.$eval( attributes.useAsyncValidators );
for(var validator in validators) {
if (typeof validators[validator] === "function") {
ngModel.$asyncValidators[validator] = validators[validator];
}
}
}
}
.controller('validateTestController', function ($scope, $timeout) {
delayedValidator = function () {
return $timeout(true, 1000);
};
alwaysTrue = function () {
return true;
};
$scope.validators = {
isNameAvailable: alwaysTrue,
isEmailAvailable: delayedValidator
}
});
You can then use the following markup:
<form ng-controller="validateTestController">
<input class="inputField"
ng-model="whatever"
use-async-validators="validators" />
</form>
This setup would validate the field with the validator named isNameAvailable using the function
alwaysTrue</code, and another validator on the same field called <code>isEmailAvailable
utilizing
delayedValidator.
While the provided validator functions may not have practical implications, the concept showcased here involves only a few lines of code to implement a generic directive achieving your desired outcome.