ng-maxlength="1" does not work - Angular

Question

Good afternoon, I have an input type "number" and I need to limit the number of characters, but the way I’m doing is not working.

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

When I take the field type "number", the ng-maxlength works, the problem is that I can’t leave field without type as it will affect other parts of the system.

Does anyone have any idea?

Answer 1

A the property maxlength determines a maximum value of length, useful for type content string.

A numerical value has, instead, a maximum value.

Try it this way:

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

Functional example:

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>

Source.