Open In App

AngularJS ng-minlength Directive

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
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=
    </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:

 



Last Updated : 16 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads