The ngMaxlength Directive in AngularJS adds the maxlength validator to the ngModel. This directive is mostly used to control the text-based inputs but can also be applied for controlling the custom text-based controls.

This validator sets the maxlength error key if the value ngModel.$viewValue is longer than the integer value obtained by evaluating the Angular JS expression defined in the ngMaxlength attribute value.

Syntax

..content..

Example − ngMaxlength Directive

Create a file "ngMaxlength.html" in your Angular project directory and copy-paste the following code snippet.

   
      


   

   
      

         Welcome to Tutorials Point
      
      

         AngularJS | ngMaxlength Directive
      

      

         

            Input the text maxlength: 
            
            

            This input is restricted by the current maxlength: 
            

            

            input valid? = {{form.input.$valid}}

            model = {{model}}
         
      

      
   

Output

To run the above code, just go to your file and run it as a normal HTML file.

Observe the output when the length of the entered text becomes greater than the maxlength, the input becomes invalid.