Permitir que solo los números dentro del rango se ingresen en el cuadro de texto

Intento crear una directiva de texto de entrada que solo aceptará números dentro de un rango específico. Intenté analizar el valor como un entero; por supuesto, min y max no funcionaron.

No quiero usar la entrada [type = “number”].
En definitiva, estoy intentando crear un campo de texto de entrada libre de fecha de nacimiento. Como el que se ve a continuación:

fecha de nacimiento.png

La directiva que he adaptado [que estoy tratando de usar en este momento] – el original se puede encontrar @ angularjs: permite que solo los números se escriban en un cuadro de texto

 app.directive('onlyDigits', function () { return { restrict: 'A', require: '?ngModel', link: function (scope, element, attrs, modelCtrl) { modelCtrl.$parsers.push(function (inputValue) { if (inputValue == undefined) return ''; var transformedInput = inputValue.replace(/[^0-9]/g, ''); var theInt = parseInt(transformedInput); if (transformedInput !== inputValue) { modelCtrl.$setViewValue(transformedInput); modelCtrl.$render(); } return theInt; }); } }; 

Lo que esperaba hacer después de haber resuelto esto, es hacer un ng-show condicional, para mostrar un error para un elemento span – cuando el usuario ha escrito un valor superior a 31 (por día) 12 (por mes) y así adelante.

Doy la bienvenida a cualquier sugerencia.

Gracias.

Tuve exactamente el mismo problema. Intenté “todo” para que sea fácil de usar y no acepte valores no válidos. Finalmente abandoné las soluciones aparentemente fáciles, como ng-pattern , y con la ayuda de un amigo @Teemu Turkia, se nos ocurrió una directiva de integers-only .

Utiliza type="text" , admite tanto min como max , no acepta caracteres que vayan más allá de los números y - (como primer carácter en caso de que el mínimo sea negativo) a escribir.

Además, ng-model nunca se le asigna un valor no válido, como cadena vacía o NaN , solo valores entre el rango determinado o null .

Lo sé, al principio parece bastante intimidante;)

HTML

 // note: uses underscore.js  
DD / MM / YYYY
Invalid day Invalid month Invalid year

JavaScript

 /** * numeric input *  */ angular.module('app', []) .directive('integersOnly', function() { return { restrict: 'A', require: 'ngModel', scope: { min: '=', max: '=' }, link: function(scope, element, attrs, modelCtrl) { function isInvalid(value) { return (value === null || typeof value === 'undefined' || !value.length); } function replace(value) { if (isInvalid(value)) { return null; } var newValue = []; var chrs = value.split(''); var allowedChars = ['0','1','2','3','4','5','6','7','8','9','-']; for (var index = 0; index < chrs.length; index++) { if (_.contains(allowedChars, chrs[index])) { if (index > 0 && chrs[index] === '-') { break; } newValue.push(chrs[index]); } } return newValue.join('') || null; } modelCtrl.$parsers.push(function(value) { var originalValue = value; value = replace(value); if (value !== originalValue) { modelCtrl.$setViewValue(value); modelCtrl.$render(); } return value && isFinite(value) ? parseInt(value) : value; }); modelCtrl.$formatters.push(function(value) { if (value === null || typeof value === 'undefined') { return null; } return parseInt(value); }); modelCtrl.$validators.min = function(modelValue) { if (scope.min !== null && modelValue !== null && modelValue < scope.min) { return false; } return true; }; modelCtrl.$validators.max = function(modelValue) { if (scope.max !== null && modelValue !== null && modelValue > scope.max) { return false; } return true; }; modelCtrl.$validators.hasOnlyChar = function(modelValue) { if (!isInvalid(modelValue) && modelValue === '-') { return false; } return true; }; } }; }); 

Resultado

imagen


Plunker relacionado aquí http://plnkr.co/edit/mIiKuw

Aquí hay una solución sin directivas personalizadas. Todavía es input type="number" pero se logra la funcionalidad necesaria.

Aquí está plunker

     

Date of birth form

date must be in range 1 to 31!

month must be in range 1 to 12!

year must be in range 1900 to 2016!

Esta solución usa los atributos mínimo y máximo para limitar los valores de los campos de entrada. También utiliza ngModelOptions para actualizar el valor del modelo solo después de un intervalo definido. Esto es para permitirles a los usuarios ingresar valores antes de que el analizador del modelo actúe en la entrada.

 angular.module("app", []); angular.module("app").directive('onlyDigits', function() { return { restrict: 'A', require: '?ngModel', scope: { min: "@", max: "@" }, link: function(scope, element, attrs, modelCtrl) { modelCtrl.$parsers.push(function(inputValue) { if (inputValue == undefined) return ''; var transformedInput = inputValue.replace(/[^0-9]/g, ''); var theInt = parseInt(transformedInput); var max = scope.max; var min = scope.min; if (theInt > max) { theInt = max; } else if (theInt < min) { theInt = min; } modelCtrl.$setViewValue(theInt.toString()); modelCtrl.$render(); return theInt; }); } } });