AngularJS | Directiva ng-maxlength

La directiva ng-maxlength en AngularJS se usa para establecer la longitud máxima para un campo de entrada, es decir, agrega la restricción para un campo de entrada. Es diferente del atributo maxlength en HTML porque el primero evita que los usuarios excedan el límite, mientras que el último no lo hace. Hará que el formulario no sea válido si se excede el límite de entrada.

Sintaxis:

 <element ng-maxlength="expression"> Contents... </element> 

Donde expresión es un número que indica el límite máximo hasta el cual la entrada es válida.

Ejemplo: este ejemplo usa la directiva ng-maxlength para verificar la longitud máxima de la string.

<!DOCTYPE html>
<html>
  
<head>
    <title>ng-maxlength Directive</title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body style="text-align: center">
      
    <h1 style="color:green">GeeksforGeeks</h1>
      
    <h2>ng-maxlength Directive</h2>
      
    <div ng-app="app" ng-controller="geek">
          <form name="maxlen" novalidate ng-submit=
                        "maxlen.$valid &&maxlength()">
              <pre>Atmax 5 characters required</pre>
                
              Input: <input type="text" name="code" ng-model="txt"
                        ng-maxlength="5" required />
             <br><br>
               
             <button type="submit">Click it</button>
               
             <br><br>
               
             <span>{{msg}}</span>
         </form>
    </div>
      
    <script>
        var app = angular.module('app', []);
        app.controller('geek', function ($scope) {
            $scope.maxlength = function () {
                $scope.msg = "Input is valid";
            };
        });
    </script>
</body>
  
</html>

Salida:
Antes de hacer clic en el botón:
ngmaxlength
Después de hacer clic en el botón:
ngmaxlength

Publicación traducida automáticamente

Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *