1

Boa tarde, tenho um input do tipo "number" e preciso limitar o número de caracteres, mas da forma que estou fazendo não está funcionando.

<input id="turbidez" type="number" ng-maxlength="7" ng-model="turbidez.turbidez" required />

Quando eu tiro o tipo do campo "number", o ng-maxlength funciona, o problema é que eu não posso deixar campo sem tipo, pois irá afetar outras partes do sistema.

Alguém tem alguma ideia?

1 Resposta 1

1

A a propriedade maxlength determina um valor máximo de comprimento, útil para conteúdo do tipo string.

Um valor numérico possui, ao invés disso, um valor máximo.

Tente da seguinte maneira:

<input id="turbidez" 
 type="number" 
 max="9999999" // Máximo valor com 7 casas decimais.
 ng-model="turbidez.turbidez" 
 required />

Exemplo funcional:

angular.module('myApp', [])
.controller('myController', function($scope){
  $scope.turbidez = 5000;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="myApp">
  <form name="myForm" ng-controller='myController'>
    
    <input name="turbidez" 
 type="number" 
 max="9999999" // Máximo valor com 7 casas decimais.
 ng-model="turbidez" 
 required />
 
    <div role="alert">
      <span class="error" ng-show="myForm.turbidez.$error.required">
      Valor obrigatório.</span>
      <span class="error" ng-show="myForm.turbidez.$error.number">
      Valor não é um número.</span>
      <span class="error" ng-show="myForm.turbidez.$error.max">
      Valor acima do aceitável.</span>
    </div>

    <br/>
    
    <tt>valor = {{turbidez}}</tt><br/>
    <tt>myForm.turbidez.$valid = {{myForm.turbidez.$valid}}</tt><br/>
    <tt>myForm.turbidez.$error = {{myForm.turbidez.$error}}</tt><br/>
    <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>

    
  </form>
</div>

Fonte.

3
  • Tentei com max="9999999" e ng-max="9999999", mas não funcionou.
    – jveing
    Commented 22/08/2017 às 20:08
  • @jveing Incluí um exemplo funcional na resposta.
    – OnoSendai
    Commented 22/08/2017 às 20:26
  • OnoSendai, consegui resolver o problema. Não exatamente como eu queria, que era limitar realmente o número de caracteres, mas agora ele mostra uma mensagem ao passar da quantidade máxima. Utilizei o exemplo que você passou max="9999999".
    – jveing
    Commented 23/08/2017 às 11:26

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 .