Add a way to handle $asyncValidators completion

[brian428]

The new $asyncValidators are a nice addition. But there seems to be a critical missing piece here: there doesn't seem to be a way to react when the $asyncValidators complete their work.

The documentation and blog entries I've been able to find will occasionally mention that you can add a check for $pending to a submit button to prevent submission. But that seems to be a really constrained option, since it offers no programmatic control.

The only option I could come up with was to check if $pending is present on the form scope, and add a watch on it. When $pending is removed, I can clear the watch and trigger additional logic. This works, but it seems harder than it should be.

My thought is to add a "promise" key to the $pending object, that provides a Promise around the async validation logic. This way, we would be able to do $pending.promise.then( ... ) to react when the async validation is complete.

[Narretz]

We are working on a bigger refactor of ngModel that will introduce a hook into the end of a validation run - after all validators have run, basically. Would this suffice for your situation?
Also, what about:

ngModel.$asyncValidators.async = function() {  
  var deferred = $q.defer();
  var promise = $deffered promise;

  promise.then(function(result) {
    // handle the resolved asyncValidator here
  }) 

  //Do your magic ...
  deferred.resolve(true');

  return promise;
}

[brian428]

The ngModel tweak and the return of a promise from the validation function are fine if you just care about knowing when a single async validator is finished. (EDIT: I really mean a single field, since a field can have multiple async validators.) But I'm working at the level of the overall form, so I need to know when all of the async validators (for all the fields in the form) are done. That's why I was thinking that the $pending object itself could have a promise key, to store a Promise that resolves once all of the async validators are finished. Hopefully this makes sense.

[Narretz]

@petebacondarwin I think this is something we should keep in mind for the ngModel refactor / as a second step.

[petebacondarwin]

This is in my POC.

For a single validation to complete see: https://github.com/petebacondarwin/ngModelPOC/blob/master/src/Validity.js#L18-L58
And for handling multiple (potentially out of date) validations see: https://github.com/petebacondarwin/ngModelPOC/blob/master/src/ngModelAdaptors.js#L20-L53

[brian428]

I think that looks good. Can I infer that the promise will end up as a key on the form's $pending object?

[petebacondarwin]

This is up for grabs. We should have a discussion about how best to represent this. I am thinking more explicit $pendingValidation might be more intuitive?

[brian428]

Hmm...from what I can see, the existing $pending object contains keys for each of the async validators in use, correct? If so, I'd say just adding another key to contain the promise would seem to make sense, vs. adding a $pendingValidation to the form object. (At least I'm assuming it would go there, alongside $pending?)

That said, I really don't have a strong preference either way. As long as I have a stable way to know when the async validators are finished, I'll be happy.

[matsko]

For now, can't you just place a watcher on ngModel.$pending?

[brian428]

As I said in my initial post, that's what I'm doing now. It's just not a very simple/obvious/intuitive solution for something this fundamental to form validation. Since the async validation functions already return promises, wrapping them up inside another promise should be pretty straightforward. It's also much more elegant and in line with how async processes should be handled in general. This is what promises are for, after all. :-)

[intellix]

+1 to this. At the moment I have <form ng-submit="next(form)"> and in my controller:

$scope.next = function(form)
{
  if (form.$valid) {
    $scope.process.step += 1;
  }
};

But as said above, the form might be in the process of resolving it's asyncValidators, so $pending contains stuff. Maybe it would be cool if I could do something like:

$scope.next = function(form)
{
  form.$asyncValid.then(function() {
    $scope.process.step += 1;
  });
};

Right now I'm doing:

$scope.next = function(form)
{
    if (form.$pending) {
      var pendingWatch = $scope.$watch(function() {
        return form.$pending;
      }, function(pending) {
        if (!pending) {
          pendingWatch();
          $scope.next(form);
        }
      });
    }
    if (form.$valid) {
      $scope.process.step += 1;
    }
};

[danicomas]

@intellix +1