angularjs - Considere una forma no válida mientras las promesas de validación asíncrona están pendientes

angularjs-model angularjs-ng-form

Question

Tengo un validador asíncrono:

app.directive(''validateBar'', [''$http'', function($http) {
    function link($scope, $element, $attrs, ngModel) {
        ngModel.$asyncValidators.myValidator = function(value) {
            return $http.get(''/endpoint/'' + value);
        };
    }
    return {
        require: ''ngModel'',
        link: link
    };
}]);

Plantilla de formulario:

<form name="myForm" ng-submit="foo.$valid && saveForm()">
    <input name="bar" ng-model="bar" data-validate-bar>
    <p ng-show="myForm.bar.$error.myValidator">Your bar is wrong</p>
    <button disabled="myForm.$invalid">
</form>

Problema: quiero que mi formulario de acompañamiento no sea válido mientras la promesa myValidator está pendiente.

Conozco dos formas de invalidar un formulario mientras los validadores asíncronos están pendientes, pero ambos son detallados y / o intrusos.

// Workaround 1: Mark another validator as invalid while the validator promise is pending.
// I cannot mark ''myValidator'' as invalid, gets set to valid immediately by Angular.
app.directive(''validateSomething'', [''$http'', function($http) {
    function link($scope, $element, $attrs, ngModel) {
        ngModel.$setValidity(''async'', false);
        ngModel.$asyncValidators.myValidator = function(value) {
            return $http.get(''/endpoint/'' + value).then(function() {
                 ngModel.$setValidity(''async'', true);
            });
        };
    }
    return {
        require: ''ngModel'',
        link: link
    };
}]);

<!-- Workaround 2: Prevent submitting through the UI -->
<form name="myForm" ng-submit="myForm.$valid && !myForm.$pending && saveForm()">
    <input name="bar" ng-model="bar" data-validate-bar>
    <p ng-show="myForm.bar.$error.myValidator">Your bar is wrong</p>
    <button disabled="myForm.$invalid || myForm.$pending">
</form>

No me gusta la solución 1 porque marco otro validador ( async ) como no válido, que puede tener efectos secundarios no deseados, y no me gusta la solución 2 porque ya no puedo confiar en la form.$valid por sí mismo.

¿Alguien sabe una solución limpia?

Answer 1

Puede usar $pending para probar si algún validador asíncrono está pendiente en todo el formulario o en un elemento de entrada específico. También agregué una prueba en $pristine para ocultar mensajes de error cuando la página se carga y usé ng-disabled lugar de disabled en el button .

<form name="myForm" ng-submit="foo.$valid && saveForm()">
    <input name="bar" ng-model="bar" data-validate-bar>
    <div ng-show="! myForm.$pristine">
      <p ng-show="myForm.bar.$pending.myValidator || myForm.bar.$error.myValidator">Your bar is wrong</p>
    </div>
    <button ng-disabled="myForm.$invalid || myForm.$pending">Do smth</button>
</form>