5

Observei que a página tem o seguinte código para um input:

<div class="form-group required col-md-3">
    <label for="area" class="control-label">ÁREA(ha):</label>
    <input id="area" type="text" class="form-control" data-ng-model="ctrl.area" />
</div>

Então alterei o type do input, utilizando o type"number" especificado no HTML5.

<input id="area" type="number" class="form-control" data-ng-model="ctrl.area" />

No Chrome funcionou, entretanto no Firefox e no Internet Explorer consegui preencher com caracteres alfas. Tentei utilizar o atributo pattern, mas não obtive êxito.

<input id="area" type="number" pattern="[0-9]*" class="form-control" data-ng-model="ctrl.area" />

Alguma sugestão, alguma diretiva ou função do AngularJs?
Firefox:47.0.1
Internet Explorer 11

3
  • 1
    Já tentou utilizar o ng-pattern? Commented 26/10/2016 às 13:58
  • @DiegoAugusto tentei, continua permitindo informa caracteres alfas.
    – Oliveira
    Commented 26/10/2016 às 16:17
  • Permitir vai continuar mesmo, porém vai dar erro no formulário ao tentar fazer o submit. Se você quiser bloquear a entrada de números, vai precisar de uma diretiva, ex: hassantariqblog.wordpress.com/2015/04/25/… Commented 26/10/2016 às 16:28

2 Respostas 2

3

//diretiva

app.directive('numericOnly', function(){
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {

            modelCtrl.$parsers.push(function (inputValue) {
                var transformedInput = inputValue ? inputValue.replace(/[^\d.-]/g,'') : null;

                if (transformedInput!=inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }

                return transformedInput;
            });
        }
    };
});

//html

<input id="area" type="text" class="form-control" data-ng-model="ctrl.area" numeric-only/>
2
  • 3
    Tente sempre adicionar uma explicação em sua resposta, e não apenas dar o código bruto. Mais importante do que fazer funcionar, é saber como fazer funcionar. Commented 28/10/2016 às 19:55
  • A diretiva funciona em essência, mas permite a inclusão de múltiplos pontos e múltiplos sinais de negativo. Commented 22/02/2017 às 12:26
2

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
3
  • Ao realizar o parseFloat você realiza um replace em uma variavel tInput, que nao existe. O código entao retorna erro. Mesmo quando troqueo o tInput para input o código continuou dando problema quando o campo está vazio e digito uma letra. Commented 22/02/2017 às 13:22
  • Desculpa, copiei o código que fiz em um projeto e fui alterando mas essa parte eu deixei o original, ja vou arrumar. Obrigado pelo toque
    – Giovane
    Commented 22/02/2017 às 13:25
  • @FelipeLeão pronto, corrigi e testei. Pode pegar o código novo ai.
    – Giovane
    Commented 22/02/2017 às 13:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .