angularjs - validaciones - La validación no se activa cuando los datos vinculan los atributos mínimo/máximo de una entrada numérica

validar formulario angular 5

Question

Tengo numerosos campos de entrada numérica que tienen valores de atributo mínimo y máximo que dependen de la lógica en otra parte de mi aplicación AngularJS, pero al usar enlaces de datos dentro de estos atributos Angular ya no los valida, sin embargo, la validación de HTML 5 parece recogerlos arriba.

var myApp = angular.module(''myApp'', []);
function FirstCtrl($scope) {
    $scope.min = 10;
    $scope.max = 20;
}

<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
        <form name="myForm">
            <input type="number" name="one" required="required"
                   min="10" max="20" ng-model="one" />
            <input type="number" name="two" required="required"
                   min="{{ min }}" max="{{ max }}" ng-model="two" />
            <button ng-disabled="!myForm.$valid">Submit</button>
        </form>
    </div>
</div>

Versión en vivo: http://jsfiddle.net/kriswillis/bPUVH/2/

Como puede ver, la validación aún se maneja bien en HTML / CSS (Bootstrap) ya que ambos campos se vuelven rojos cuando no es válido, sin embargo, el botón de envío (manejado por Angular) no se desactiva cuando el segundo campo no es válido. Además, no hay propiedades mínima y máxima en el myForm.two.$error Como en myForm.one.$error .

¿Alguien puede ver dónde me estoy equivocando?

Answer 1

Angular parece ahora admitir ng-min y ng-max de forma inmediata, sin la necesidad de escribir sus propias directivas. Ver este violín que está usando Angular 1.4.2.

Answer 2

Aparentemente no podemos usar {{}} s (es decir, interpolación) para los campos min y max . Miré el código fuente y encontré lo siguiente:

if (attr.min) {
  var min = parseFloat(attr.min);

$interpolate no se llama, solo parseFloat , por lo que tendrá que especificar una cadena que se parece a un número para min y max .

Answer 3

Escribí directivas para llenar el vacío, ng-min y ng-max:

http://jsfiddle.net/g/s5gKC/

var app = angular.module(''app'', []);

function isEmpty(value) {
  return angular.isUndefined(value) || value === '''' || value === null || value !== value;
}

app.directive(''ngMin'', function() {
    return {
        restrict: ''A'',
        require: ''ngModel'',
        link: function(scope, elem, attr, ctrl) {
            scope.$watch(attr.ngMin, function(){
                ctrl.$setViewValue(ctrl.$viewValue);
            });
            var minValidator = function(value) {
              var min = scope.$eval(attr.ngMin) || 0;
              if (!isEmpty(value) && value < min) {
                ctrl.$setValidity(''ngMin'', false);
                return undefined;
              } else {
                ctrl.$setValidity(''ngMin'', true);
                return value;
              }
            };

            ctrl.$parsers.push(minValidator);
            ctrl.$formatters.push(minValidator);
        }
    };
});

app.directive(''ngMax'', function() {
    return {
        restrict: ''A'',
        require: ''ngModel'',
        link: function(scope, elem, attr, ctrl) {
            scope.$watch(attr.ngMax, function(){
                ctrl.$setViewValue(ctrl.$viewValue);
            });
            var maxValidator = function(value) {
              var max = scope.$eval(attr.ngMax) || Infinity;
              if (!isEmpty(value) && value > max) {
                ctrl.$setValidity(''ngMax'', false);
                return undefined;
              } else {
                ctrl.$setValidity(''ngMax'', true);
                return value;
              }
            };

            ctrl.$parsers.push(maxValidator);
            ctrl.$formatters.push(maxValidator);
        }
    };
});

angular.bootstrap(document.body, [''app'']);

Answer 4

También escribí una directiva personalizada para ello:

Demostración de trabajo: http://plnkr.co/edit/BJ98ZR?p=preview

.directive(''validateRange'', [''$parse'', function($parse) {

    function link($scope, $element, $attrs, ngModel) {
        var attrRange, range = [];

        function validate(value) {
            var validMin = true, validMax = true;
            if (typeof range[0] === ''number'') {
                ngModel.$setValidity(''min'', value >= range[0]);
                validMin = value >= range[0];
            }
            if (typeof range[1] === ''number'') {
                ngModel.$setValidity(''max'', value <= range[1]);
                validMax = value <= range[1];
            }
            return validMin && validMax ? value : undefined;
        }

        attrRange = $attrs.validateRange.split(/,/);

        range[0] = $parse(attrRange[0] || '''')($scope);
        range[1] = $parse(attrRange[1] || '''')($scope);

        $scope.$watchCollection(''['' + $attrs.validateRange + '']'', function(values) {
            range = values;
            validate(ngModel.$viewValue);
        });

        ngModel.$parsers.unshift(validate);
        ngModel.$formatters.unshift(validate);
    }

    return {
        link: link,
        require: ''ngModel''
    };

}]);

Ejemplo de uso:

<form name="myform" ng-init="minvalue=0;value=1;maxvalue=2">
    Min Value:
    <input type="number" name="minvalue" required
           data-validate-range="0,value"
           ng-model="minvalue">

    Value:
    <input type="number" name="value" required
           data-validate-range="minvalue,maxvalue"
           ng-model="value">

    Max Value:
    <input type="number" name="maxvalue" required
           data-validate-range="value,false"
           ng-model="maxvalue">

    <pre>
        myform.minvalue.$error {{ myform.minvalue.$error }}
        myform.value.$error    {{ myform.value.$error }}
        myform.maxvalue.$error {{ myform.maxvalue.$error }}
    </pre>
</form>

Answer 5

tengo el mismo problema obtuvo éxito al usar esta directiva:

angular.module(''tech'').directive(''maximum'', [''$parse'',
  function($parse) {
    return {
      restrict: ''A'',
      require: ''?ngModel'',

      link: function(scope, element, attrs, ctrl) {

        if (!ctrl) return;
        attrs.maximum = true;


        var checkMax = function(n) {
          if (!n) return;

          var actualValue = ctrl.$viewValue;
          var maxValue = attrs.maximum;
          if (parseInt(actualValue) > parseInt(maxValue)) {
            ctrl.$setValidity(''maximum'', false);
          } else {
            ctrl.$setValidity(''maximum'', true);
          }
        };
        scope.$watch(attrs.ngModel, checkMax);
        //attrs.$observe(''ngModel'', remind);
        attrs.$observe(''maximum'', checkMax);

      }
    }
  }
]);

obtuve esta solución de este sitio web. para todo el código puede ir a este sitio web