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:
- Mark all elements with
cm-form-control
custom directive which will subscribe for 2 notifications: "data-sent" and "data-processed". Then custom code is responsible for pushing second notification or resolve a promise. - Use
promiseTracker
that (unfortunatelly!) enforces to produce extremely stupid code likeng-show="loadingTracker.active()"
. Obviously not all elements haveng-disabled
and I don't want to userng-hide/show
to avoid "dancing" buttons. - Bite a bullet and still use JQuery
Does any one have a better idea? Thanks in advance!
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);
};
});
Solution 1:
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.