My async validator 'username-validator' was designed to check for username availability without making multiple remote calls. To achieve this, I decided to update the ng-model on the 'blur' event rather than on every 'key press'. As a result, the validator now only triggers on the 'blur' event.
<input type="text" ng-model="signup.username" name="username"
required
username-validator
ng-model-options="{ updateOn: 'blur' }">
However, during form submission, the system checks if the form is valid before proceeding with the submission.
$scope.submit = function(form) {
if (form.$valid) {
alert('submitting', $scope.signup.username, $scope.signup.password);
}
};
The issue arises when clicking the Submit button while the form is in a $pending state. In such cases, the form does not get submitted in a single click because it is still in a $pending state and $valid returns as undefined.
I am looking for a solution to write my $scope.submit function in a way that it handles the submission once the $pending state is resolved.
Is there a way to accomplish this without disabling the Submit button for $pending states?
To better illustrate the problem, I have included a running snippet for reference.