AngularJS: disabling all form controls between submit and server response

Wrap all your fields in fieldset and use ngDisabled directive like this:

<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>

It will automatically disable all inputs inside the fieldset.

Then in controller set $scope.isSaving to true before http call and to false after.

javascript forms angularjs submit

There is an simple solution in modern browsers:

define a css class

.disabled {  pointer-events: none;  ... ...}

add this class to ng-form

<ng-form data-ng-class="{ 'disabled': isSaving }"> ... inputs ... </ng-form>

Here is the pointer-events support chart.

Note: even if you set pointer-events: none, you can still tab to input element with your keyboard.

CodeHunter