Limiting the length of a String using Custom Directive

Limiting the length of a String Using built-in ‘limitTo’ Filter

In this approach, we are using the custom directive to limit the length of the string in AngularJS. Here, we have used the custom directive called ‘charLimit” to mainly restrict the user input to a maximum of 20 characters allowed while typing. This defined directive tracks the the input changes and also truncates the input value if the exceeds the set threshold value of 20 characters. This also gives the alert message when the limit of charters is been crossed.

Example: Below is an example that showcases the limiting length of a string in AngularJS using Custom Directive.

HTML

<!doctype html> 
<html ng-app="myApp"> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> 
    </script> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            background-color: #f0f0f0; 
            margin: 0; 
            padding: 0; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            min-height: 100vh; 
        } 
  
        .container { 
            width: 100%; 
            max-width: 400px; 
            padding: 20px; 
            background-color: #fff; 
            border-radius: 5px; 
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
        } 
  
        .header { 
            color: #4caf50; 
            text-align: center; 
            font-size: 18px; 
            font-weight: bold; 
            margin-bottom: 20px; 
        } 
  
        .sub-header { 
            font-size: 16px; 
            color: rgb(0, 0, 0); 
            text-align: center; 
            margin-bottom: 10px; 
        } 
  
        .input-container { 
            margin-top: 20px; 
        } 
  
        .input-container label { 
            font-size: 18px; 
            margin-bottom: 5px; 
            color: rgb(0, 0, 0); 
        } 
  
        .input-container input[type="text"] { 
            width: 90%; 
            padding: 10px; 
            font-size: 16px; 
            border: 2px solid #ccc; 
            border-radius: 4px; 
        } 
  
        .char-limit-exceeded { 
            color: red; 
            font-size: 14px; 
            text-align: center; 
            margin-top: 5px; 
        } 
    </style> 
</head> 
  
<body ng-controller="myCtrl"> 
    <div class="container"> 
        <div class="header"> 
            <h1>w3wiki</h1> 
        </div> 
        <div class="sub-header"> 
            <p>Approach 2: Using Custom Directive</p> 
            <p>Maximum character limit is 20.</p> 
        </div> 
        <div class="input-container"> 
            <label for="inputText"> 
                  Enter a text: 
              </label> 
            <input type="text"
                   id="inputText" 
                   ng-model="inputText" 
                   char-limit="20" /> 
            <p class="char-limit-exceeded" 
               ng-show="inputText.length > 20"> 
                Character limit exceeded! 
              </p> 
        </div> 
    </div> 
    <script> 
        var app = angular.module("myApp", []); 
        app.controller("myCtrl", function ($scope) { 
            $scope.inputText = ""; 
        }); 
        app.directive("charLimit", function () { 
            return { 
                restrict: "A", 
                scope: { 
                    charLimit: "=", 
                }, 
                link: function (scope, element, attrs) { 
                    element.on("input", function () { 
                        var value = element.val(); 
                        if (value.length > scope.charLimit) { 
                            scope.$apply(function () { 
                                element.val(value.substr(0, scope.charLimit)); 
                            }); 
                        } 
                    }); 
                }, 
            }; 
        }); 
    </script> 
</body> 
  
</html>

Output:

How to limit the length of a string in AngularJS ?

Validation of fields is an important process while developing a dynamic web application. In various aspects of security, the validation is quite important. Along with this, the restriction of the limit to the length of a string is also an important process that helps to include the constraint for the maximum length for an input field or a text area. Limiting the length of a string can help to maintain a positive user experience by preventing the users from unintentionally entering long text which causes the issues of data corruption and all. In this article, we will see the approaches to limit the length of a string in AngularJS.

Tags:

#AngularJS-Questions #Geeks Premier League 2023 #AngularJS #Geeks Premier League #Web Technologies

Limiting the length of a String Using built-in ‘limitTo’ Filter

Limiting the length of a String using Custom Directive

HTML

Output:

How to limit the length of a string in AngularJS ?

Similar Reads

Contact Us