AngularJS ng-maxlength Directive

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" />
</form>

AngularJS ng-maxlength Directive Example

<!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

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-maxlength Directive

AngularJS ng-maxlength Directive Example

Recent Articles