The AngularJS ng-maxlength
directive is used to add the maxlength validator to ngModel. It can be used with text-based input controls, but can also be applied to custom text-based controls.
Syntax
<input type="text" ng-model="model" id="input" name="input" ng-maxlength="maxlength" />
<!DOCTYPE html> <html> <head> <!-- www.techstrikers.com --> <title>ngMaxLength Test Sample</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <script> var app = angular.module('MaxlengthExample', []) app.controller('MaxlengthController', ['$scope', function($scope) { $scope.maxlength = 5; }]); </script> </head> <body style="background-color:#DDE4E9;" ng-app="MaxlengthExample"> <fieldset style="background-color:#DDE4E9;"> <legend>AngulerJS ngMaxLength Example</legend> <div ng-controller="MaxlengthController"> <form name="myform"> <label for="maxlength">Default Max Length: </label> <input type="number" ng-model="maxlength" id="maxlength" /> <br><br> <label for="input">Enter Max Value: </label> <input type="text" ng-model="model" id="input" name="input" ng-maxlength="maxlength" /><br> <p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-show='!myform.input.$valid'>Invalid Max Length</p> </form> </div> </fieldset> </body> </html>See Live Example