CODEWITHSUNDEEP
javascriptformsangularjssubmit
YoMan78
YoMan78

Reputation: 1307

AngularJS: disabling all form controls between submit and server response

I have a dilemma about what is the best (and correct) approach if I want to disable form controls (or at least make them unavailable for user interaction) during a period of time when user clicks sort of "Save" or "Submit" button and data travelling over the wire. I don't want to use JQuery (which is evil!!!) and query all elements as array (by class or attribute marker) The ideas I had so far are:

Does any one have a better idea?

UPDATED: The fieldset idea DOES work. Here is a simple fiddle for those who still want to do the same http://jsfiddle.net/YoMan78/pnQFQ/13/

HTML:

<div ng-app="myApp">
    <ng-form ng-controller="myCtrl">
        Saving: {{isSaving}}
        <fieldset ng-disabled="isSaving">
            <input type="text" ng-model="btnVal"/>
            <input type="button" ng-model="btnVal" value="{{btnVal}}"/>
            <button ng-click="save()">Save Me Maybe</button>
        </fieldset>
    </ng-form>
</div>

and JS:

var angModule = angular.module("myApp", []);

angModule.controller("myCtrl", function ($scope, $filter, $window, $timeout) {
    $scope.isSaving = undefined;
    $scope.btnVal = 'Yes';
    $scope.save = function()
    {
        $scope.isSaving = true;
        $timeout( function()
             {
                 $scope.isSaving = false;
                 alert( 'done');
             }, 10000);
    };
});

Upvotes: 123

Views: 97104

Answers (2)

Raoh
Raoh

Reputation: 1

There is an simple solution in modern browsers:

  1. define a css class

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

  2. 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.

Upvotes: -5

Alexander Puchkov
Alexander Puchkov

Reputation: 5973

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.

Upvotes: 286

Related Questions