Open In App

AngularJS ng-minlength Directive

Last Updated : 16 Aug, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </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:

 

V
Vishal Chaudhary 2
Improve
Article Tags :

Explore

Lightbox