Skip to content
Related Articles

Related Articles

AngularJS ng-minlength Directive

Improve Article
Save Article
  • Last Updated : 16 Aug, 2022
Improve Article
Save Article

The ng-minlength Directive in AngularJS is used to set the minimum length for an input field i.e it adds the restriction for an input field. It is different from minlength attribute in HTML because the former prevents users from entering less than the specified limit whereas the later doesn’t do that. It makes the form invalid if the entered input is less than the specified limit. 

Syntax:

<element ng-minlength="expression"> 
    content... 
</element> 

Parameter:

  • expression It specifies the number denoting the minimum limit below which the input is invalid. 

Example 1: This example uses the ng-minlength Directive to set the minimum length of the string. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>ng-minlength Directive</title>
    <script src=
    </script>
</head>
 
<body style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>ng-minlength Directive</h2>
    <div ng-app="app" ng-controller="geek">
        <form name="minlength" novalidate
              ng-submit="minlength.$valid &&check()">
            <pre>Minimum 5 characters required</pre>
            Input:
            <input type="text"
                   name="code"
                   ng-model="txtpin"
                   ng-minlength="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.check = function() {
                $scope.msg = "Input is valid";
            };
        });
    </script>
</body>
</html>

Output:

 

Example 2: In this example, we will render the warning message if the entered character is less than 5 in the input field with the help of the ng-minlength Directive.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
</head>
 
<body ng-app="" style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>ng-minlength Directive</h3>
    <form name="gfgData">
        <input name="inputData"
               ng-model="inputData"
               ng-minlength="5">
        <h3 ng-if="!gfgData.inputData.$valid">
            Entered value is too short!!!
        </h3>
    </form>
</body>
</html>

Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!