Angular Ajax Validator. Best Way To Prevent Submission While Validation In Progress?

With Angular forms, it's easy to see if a form is $valid or $invalid. This is great and I only allow a user to submit the form if it is $valid. But, is there an easy way to indicat

Solution 1:

You can make the button disable while the ajax request is being processed. You can have a similar logic using fieldset too checkout the manual for it fieldset.

functionvalidate (value)
{
  ctrl.waitingForAjax = true; // disable the required part while waiting for the response      // Show as valid until proven invalid
  ctrl.$setValidity('validateEmail', true);

  // if there was a previous attempt, stop it.if(timeoutId) {
    clearTimeout(timeoutId);
  }

  timeoutId = setTimeout(function() {
    // Make $http call and $setValidity$http.get(url)
    .then(function(data) {
      ctrl.$setValidity('validateEmail', data.isValid);
      ctrl.waitingForAjax = false; // you can enable your button once you got the response
    });
  }, 200);
}

Then in your view:

<buttonng-disabled="waitingForAjax"../>