What is ng-maxlength Directive?
The ng-maxlength directive allows us to set the maximum length for an input field i.e it adds the restriction for an input field. The ng-maxlength directive does not prevent the users from entering more than the restricted number of characters. When the maximum length is enforced for a field, the angularjs will count how many characters are left.
ng-maxlength Syntax
The ng-maxlength directive has the following syntax:
[code lang=”xml”]
<input type= "text" ng-maxlength="number"></input>
[/code]
Where:
“number” can be any number which represents the maximum number of characters for an input field.
ng-maxlength Example
The below example demonstrates the use of ng-maxlength directive in the AngularJS:
ng-maxlength.html
[code lang=”xml”]
<!DOCTYPE html>
<html>
<head>
<title>AngularJs ng-maxlength Directive</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="">
<form name="myForm">
Enter the text in the below field:
<input name="myInput" ng-model="maxlength" ng-maxlength="5">
<h1 ng-if="!myForm.myInput.$valid">The entered value is too long.</h1>
</form>
This example displays error if the entered text is more than 5 characters.
</body>
</html>
[/code]
- In the above example, ng-app defines that the application is angularjs.
- The ng-maxlength directive of angularjs adds the validator “maxlength” to ng-model.
- In the example, the maximum length is set to 5 i.e up to 5 characters will be entered in the input field.
- If the entered value is more than 5 characters, it will display an error as the entered value is too long.
Running Example Application using ng-maxlength
Let’s save the above code in an HTML file as ng-maxlength.html in the server root folder and open this HTML file in a standard browser as http://localhost/ng-maxlength.html and you will get the output as displayed below:
Figure: ng-maxlength
In the above figure, the entered input is 5 characters as per the restricted maximum length value.
Figure: ng-maxlength
In the above figure, if we enter the input more than the restricted value it will display an error as shown.
What is ng-minlength Directive?
The ng-minlength directive sets the minimum length for an input field i.e it adds the restriction for an input field. The ng-minlength directive does not prevent the users from entering less than the restricted number of characters. When the minimum length is enforced for a field, the angularjs will count how many characters are left.
ng-init Syntax
The ng-minlength directive has the following syntax:
[code lang=”xml”]
<input ng-minlength="number"></input>
[/code]
Where:
“number” can be any number which represents the minimum number of characters for an input field.
ng-minlength Example
The below example demonstrates the use of ng-minlength directive in the AngularJS:
ng-minlength.html
[code lang=”xml”]
<!DOCTYPE html>
<html>
<head>
<title>AngularJs ng-minlength Directive</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="">
<form name="myForm">
Enter the text in the below field:
<input name="myInput" ng-model="minlength" ng-minlength="5">
<h1 ng-if="!myForm.myInput.$valid">The entered value is too short.</h1>
</form>
This example displays error if the entered text is less than 5 characters
</body>
</html>
[/code]
- In the above example, the ng-app defines that the application is angularjs.
- The ng-minlength directive of angularjs adds the validator “minlength” to ng-model.
- In the example, the minimum length is set to 5 i.e at least 5 characters should be entered in the input field.
- If the entered value is less than 5 characters, it will display an error as the entered value is too short.
Running Example Application using ng-minlength
Let’s save the above code in an HTML file as ng-minlength.html in the server root folder and open this HTML file in a standard browser as http://localhost/ng-minlength.html and you will get the output as displayed below:
Figure: ng-minlength
In the above figure, the entered input is 5 characters as per the restricted maximum length value.
Figure: ng-minlength
In the above figure, if we enter the input less than the restricted value it will display an error as shown.