javascript - reactivos - AngularJS: deshabilita todos los controles de formulario entre enviar y respuesta del servidor

validar formulario angular 5

Question

Tengo un dilema sobre cuál es el mejor (y correcto) enfoque si quiero deshabilitar los controles de formulario (o al menos hacer que no estén disponibles para la interacción del usuario) durante un período de tiempo cuando el usuario hace clic en el botón "Guardar" o "Enviar" y datos que viajan por el cable. No quiero usar JQuery (¡que es malo!) Y consultar todos los elementos como una matriz (por clase o marcador de atributo). Las ideas que tuve hasta ahora son:

• Marque todos los elementos con la directiva personalizada cm-form-control que se suscribirá para 2 notificaciones: "envío de datos" y "procesamiento de datos". Luego, el código personalizado es responsable de enviar una segunda notificación o resolver una promesa.
• Utilice promiseTracker que (desafortunadamente!) promiseTracker cumplir para producir código extremadamente estúpido como ng-show="loadingTracker.active()" . Obviamente, no todos los elementos tienen ng-disabled y no quiero que el usuario ng-hide/show evite los botones de "baile".
• Muerde una bala y sigue usando JQuery

¿Alguien tiene una idea mejor? ¡Gracias por adelantado!

ACTUALIZADO: la idea del conjunto de campo funciona. Aquí hay un violín simple para aquellos que aún quieren hacer lo mismo 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>

y 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);
    };
});

Answer 1

Envuelva todos sus campos en fieldset y use la directiva ngDisabled así:

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

Deshabilitará automáticamente todas las entradas dentro del fieldset.

Luego, en el controlador, configure $scope.isSaving en true antes de la llamada http y en false después.

Answer 2

Hay una solución simple en los navegadores modernos:

1. definir una clase css

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

2. agregue esta clase a ng-form

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

Here está el cuadro de soporte de eventos de puntero .

Nota: incluso si establece pointer-events: none , puede tabular para ingresar elementos con su teclado.