Wait on $asyncValidators to submit form - angularjs

Question

I have a form that has a username field and other fields, this field has an async validator that checks whether that username is available when you try to submit the form (there are other fields on the form using async validation). I use this directive to validate and submit the form (only if it's valid):
<form validation-submit="submit()"></form>
app.directive('validationSubmit', ['$parse', function($parse) {
return {
restrict: 'A',
require: '?form',
compile: function($element, attr) {
var submitFn = $parse(attr.validationSubmit);
return function link(scope, element, attrs, FormController) {
var submit = function(event) {
scope.$apply(function() {
if (! FormController.$valid) {
return;
}
submitFn(scope, {$event: event}));
});
};
element.bind('submit', submit);
scope.$on('$destroy', function() {
return element.off('submit', submit);
});
}
}
};
}]);
The problem is this directive is not waiting for the pending async validations to finish. How can I change this directive to only submit after all async validations finished and passed?

Answer 1

Recently I've created a couple of directives that were checking whether email or phone number is available. I found solution that helps me. It's $asyncValidators .
app.directive('validationSubmit', ['$parse', function($parse) {
return {
restrict: 'A',
require: '?form',
link: function(scope, element, attrs, FormController) {
/**
*returns promise
**/
FormController.$asyncValidators.validEmail = function (modelValue) {
return $q(function (resolve, reject) {
//Here you should make query to your server and find out wether username valid or not
//For example it could be:
$http('http://your_api_server/Available').then(function (response) {
if (response.data.Available) {
resolve();
} else {
reject();
}
}, function (err) {
reject(err.data);
});
});
};
}
};
}]);
You should add attribute name to the form:
<form validation-submit="submit()" name="myForm"></form>
And now you have opportunity to check system properties of form in your controller:
$scope.submit = function(){
//Here will be your logic
if($scope.myForm.$valid ||
$scope.myForm.$invalid ||
$scope.myForm.$pending ||
$scope.myForm.$submitted){
//do whatever you want
}
}