Cara eu passei por esse problema e decidi me dedicar a criar uma diretiva que me soluciona-se o problema e como você pode ver a baixo, ela ficou grandinha.
basicamente você colocar como atributo do seu input um number-only
e pronto, por default ele só aceita números inteiros e positivo.
Caso queira números decimais você coloca number-only="."
ou number-only=","
ela aceita ,
e .
como separador decimal para apresentar na view.
Caso queira números negativos você coloca number-only="-"
e pronto, você pode inserir o -
na frente do número.
Caso queira aceitar quaisquer números number-only="-."
number-only="-,"
, ela vai aceitar números decimais e negativos além de inteiros positivos.
Atenção! Ela não aceita separador de milhar, tipo 1.000,00
, apenas símbolo para separar inteiros de decimais, e apenas o símbolo que você escolheu na declaração da diretiva( ,
ou .
)
.directive('numberOnly', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
var negativo = /\-/.test(attrs.numberOnly);
var decimal = /\.|\,/.test(attrs.numberOnly) ? /\.|\,/.exec(attrs.numberOnly)[0] : null;
var regExp = '^';
regExp += negativo ? '[\\-]{0,1}' : '';
regExp += '[\\d]+';
if(decimal != null) {
regExp += '[\\'+decimal+'][\\d]+|';
if(negativo) {
regExp += '[\\-]{0,1}'
}
regExp += '[\\d]+'
}
regExp += '';
regExp = new RegExp(regExp);
ngModel.$parsers.unshift(function(input) {
if(input === undefined) return null;
if(input === null) return;
input = input.toString().replace(/\./, decimal);
if(input == '-') return input;
if(decimal !== null && input.charAt(input.length-1) == decimal) return input;
input = regExp.test(input) ? regExp.exec(input)[0] : null;
var viewVal = null;
if (input !== null) {
input = decimal != null ? parseFloat(input.replace(/\,/, '.')) : parseInt(input);
}
viewVal = isNaN(input) || input === null ? '' : input;
ngModel.$setViewValue(decimal != null ? viewVal.toString().replace(/\./, decimal) : viewVal.toString());
ngModel.$render();
return isNaN(input) ? null : input;
});
ngModel.$formatters.unshift(function(value) {
if(value !== undefined && value !== null) {
return decimal != null ? value.toString().replace(/\./, decimal) : value.toString();
}
});
}
}
});
HTML
<input ng-model="var1" number-only /> // apenas inteiros positivos
<input ng-model="var2" number-only="." /> // apenas decimais positivos, separados por ponto
<input ng-model="var3" number-only="," /> // apenas decimais positivos, separados por vírgula
<input ng-model="var4" number-only="-" /> // apenas números inteiros positivos ou negativos
<input ng-model="var5" number-only=",-" /> // quaisquer números inteiros ou decimais, positivos ou negativos separados por vírgula
<input ng-model="var6" number-only="-." /> // quaisquer números inteiros ou decimais, positivos ou negativos separados por ponto