web-dev-qa-db-fra.com

AngularJS: désactivation de tous les contrôles de formulaire entre l'envoi et la réponse du serveur

J'ai le dilemme de savoir quelle est la meilleure (et correcte) approche si je veux désactiver les contrôles de formulaire (ou au moins les rendre indisponibles pour une interaction utilisateur) pendant une période de temps où l'utilisateur clique en quelque sorte sur le bouton "Enregistrer" ou "Soumettre" et les données voyageant sur le fil. Je ne veux pas utiliser JQuery (ce qui est diabolique !!!) et interroger tous les éléments sous forme de tableau (par classe ou marqueur d'attribut) Les idées que j'ai eues jusqu'à présent sont les suivantes:

  • Marquez tous les éléments avec la directive personnalisée cm-form-control qui souscrira à deux notifications: "données envoyées" et "données traitées". Ensuite, le code personnalisé est responsable de l'envoi d'une deuxième notification ou de la résolution d'une promesse.
  • Utilisez promiseTracker qui (malheureusement!) Oblige à produire un code extrêmement stupide comme ng-show="loadingTracker.active()". Évidemment, tous les éléments n’ont pas ng-disabled et je ne veux pas que l’utilisateur ng-hide/show évite les boutons "Danse".
  • Mordre une balle et toujours utiliser JQuery

Quelqu'un a-t-il une meilleure idée? Merci d'avance!

UPDATED: L'idée de l'ensemble de champs fonctionne. Voici un violon simple pour ceux qui veulent toujours faire la même chose 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>

et 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);
    };
});
javascriptformsangularjssubmit
120
YoMan78

Enveloppez tous vos champs dans fieldset et utilisez la directive ngDisabled comme ceci:

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

Il désactivera automatiquement toutes les entrées dans le fieldset.

Ensuite, dans le contrôleur, réglez $scope.isSaving sur true avant l'appel http et sur false après.

279
Alexander Puchkov