Angularjs Examples

AJS Examples


AngularJS ng-minlength Directive

The AngularJS ng-minlength directive is used to add the minlength 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-minlength="minlength" />

AngularJS ng-minlength Directive Example

<!DOCTYPE html>    
<html>    
<head> <!-- www.techstrikers.com -->    
<title>ngMinLength Test Sample</title>    
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>    
    
<script>    
  var app = angular.module('MinlengthExample', [])
    app.controller('MinlengthController', ['$scope', function($scope) {
      $scope.minlength = 5;
    }]);  
</script>    
</head>    
<body style="background-color:#DDE4E9;" ng-app="MinlengthExample">    
  <fieldset style="background-color:#DDE4E9;">      
    <legend>AngulerJS ngMinLength Example</legend>      
<div ng-controller="MinlengthController">
  <form name="myform">
    <label for="minlength">Default Max Length: </label>
    <input type="number" ng-model="minlength" id="minlength" />
    <br><br>
    <label for="input">Enter Min Value: </label>
    <input type="text" ng-model="model" id="input" name="input" ng-minlength="minlength" /><br>
<p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" 
        ng-show='!myform.input.$valid'>Invalid Min Length</p>  
  </form>
</div>
      </fieldset>     
</body>    
</html> 
See Live Example