Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
AngularJS ngMaxlength Directive
The ngMaxlength Directive in AngularJS adds the maxlength validator to the ngModel. This directive is mostly used to control the text-based inputs but can also be applied for controlling the custom text-based controls.
This validator sets the maxlength error key if the value ngModel.$viewValue is longer than the integer value obtained by evaluating the Angular JS expression defined in the ngMaxlength attribute value.
Syntax
<element ng-maxlength="expression">..content..</element>
Example − ngMaxlength Directive
Create a file "ngMaxlength.html" in your Angular project directory and copy-paste the following code snippet.
<!DOCTYPE html>
<html>
<head>
<title>ngMaxlength Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="app" style="text-align: center;">
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<h2>
AngularJS | ngMaxlength Directive
</h2>
<div ng-controller="demo">
<form name="form">
<label for="maxlength">Input the text maxlength: </label>
<input type="number" ng-model="maxlength" id="maxlength" />
<br />
<label for="input">This input is restricted by the current maxlength: </label>
<input type="text" ng-model="model" id="input" name="input" ng-maxlength="maxlength" /><br />
<br />
input valid? = <code>{{form.input.$valid}}</code><br />
model = <code>{{model}}</code>
</form>
</div>
<script>
angular.module("app", []).controller("demo", [
"$scope",
function ($scope) {
$scope.maxlength = 5;
},
]);
</script>
</body>
</html>
Output
To run the above code, just go to your file and run it as a normal HTML file.
Observe the output when the length of the entered text becomes greater than the maxlength, the input becomes invalid.
Updated on: 2021-10-08T12:31:32+05:30
403 Views
Advertisements