Here we will learn what is ng-minlength, ng-maxlength properties in angularjs, implement form validations using ng-minlength, ng-maxlength, prevent form submission if validation fails for ng-minlength, ng-maxlength directives and how to use both ng-minlength & ng-maxlength properties in angularjs applications with example.
In angularjs ng-minlength, ng-maxlength properties are used to set minimum length and maximum length limit range to input text controls in form and we can validate form text controls based on minlength and maxlength properties.
We can show the validation messages in case if the textbox contains characters less than ng-minlength property and greater than ng-maxlength property.
In angularjs by using ng-minlength property we can set form validation to check minimum length of required characters entered in input text control or not in angularjs applications.
Following is the syntax of using ng-minlength property with input text control to check minimum number of characters entered in angularjs applications.
<form name="personForm">
<input type="text" name="pincode" ng-model="txtpin" ng-minlength="5" />
<span style="color:Red" ng-show="personForm.pincode.$dirty&&personForm.pincode.$error.minlength"> Minimum 5 Characters Required </span>
</form>
We will see how to use ng-minlength property in angularjs with example.
Following is the example of validating form input control with ng-minlength property in angularjs and prevent form submission if validation fail for ng-minlength in angularjs application.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs ng-minlength Form Validation Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('formApp', []);
app.controller('formCtrl', function ($scope) {
$scope.sendForm = function () {
$scope.msg = "Form Validated";
};
});
</script>
</head>
<body>
<div ng-app="formApp" ng-controller="formCtrl">
<h3>AngularJs ng-minlength Form Validation Example</h3>
<form name="personForm" novalidate ng-submit="personForm.$valid &&sendForm()">
First Name:<input type="text" name="pincode" ng-model="txtpin" ng-minlength="5" required />
<span style="color:Red" ng-show="personForm.pincode.$error.required"> Required! </span>
<span style="color:Red" ng-show="personForm.pincode.$dirty&&personForm.pincode.$error.minlength"> Minimum 5 Characters Required </span>
<br /><br />
<button type="submit">Submit Form</button><br /><br />
<span>{{msg}}</span>
</form>
</div>
</body>
</html>
If you observe above code we are validating textbox control using ng-minlength property and checking condition like whether user entered minimum characters or not and preventing form submission in case validation fails using ng-minlength directive.
We used other properties like $dirty, minlength for form validations. If you want to know more about these properties check this url form validations in angularjs.
Following is the result of using ng-minlength property to validate form input text control in angularjs applications.
In angularjs by using ng-maxlength property we can set form validation to check maximum number of characters entered in input text control in angularjs applications.
Following is the syntax of using ng-maxlength property with input text control to check maximum number of characters entered in angularjs applications.
<form name="personForm">
<input type="text" name="pincode" ng-model="txtpin" ng-maxlength="5" />
<span style="color:Red" ng-show="personForm.pincode.$dirty&&personForm.pincode.$error.maxlength"> Maximum 5 Characters Allowed </span>
</form>We will see how to use ng-maxlength property in angularjs with example.
Following is the example of validating form input control with ng-maxlength directive and preventing form submission in case if validation fails using ng-maxlength property in angularjs.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs ng-maxlength Form Validation Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngmaxlengthApp', []);
app.controller('ngmaxlengthCtrl', function ($scope) {
$scope.sendForm = function () {
$scope.msg = "Form Validated";
};
});
</script>
</head>
<body>
<div ng-app="ngmaxlengthApp" ng-controller="ngmaxlengthCtrl">
<h3>AngularJs ng-maxlength Form Validation Example</h3>
<form name="personForm" novalidate ng-submit="personForm.$valid &&sendForm()">
Pin Code:<input type="text" name="pincode" ng-model="txtpin" ng-maxlength="5" required />
<span style="color:Red" ng-show="personForm.pincode.$error.required"> Required! </span>
<span style="color:Red" ng-show="personForm.pincode.$dirty&&personForm.pincode.$error.maxlength"> Maximum 5 Characters Allowed </span>
<br /><br />
<button type="submit">Submit Form</button><br /><br />
<span>{{msg}}</span>
</form>
</div>
</body>
</html>
If you observe above code we are validating textbox control using ng-maxlength property and checking how many characters user entered in textbox and showing validation message in case if cross maximum number of characters using ng-maxlength property.
We used other properties like $dirty, maxlength for form validations. If you want to know more about these properties check this url form validations in angularjs.
Following is the result of using ng-maxlength property to validate form input text control in angularjs applications.
We will see how to use both ng-minlength and ng-maxlength angularjs properties to validate form input text control with example.
Following is the example of validating input control with both ng-minlength and ng-maxlength properties in angularjs application.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs Example to Use Both ng-minlength, ng-maxlength for Form Validation
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngminmaxlengthApp', []);
app.controller('ngminmaxlengthCtrl', function ($scope) {
$scope.sendForm = function () {
$scope.msg = "Form Validated";
};
});
</script>
</head>
<body>
<div ng-app="ngminmaxlengthApp" ng-controller="ngminmaxlengthCtrl">
<h3>AngularJs Example to Use Both ng-minlength, ng-maxlength</h3>
<form name="personForm" novalidate ng-submit="personForm.$valid &&sendForm()">
Pin Code: <input type="text" name="pincode" ng-model="txtpin" ng-minlength="3" ng-maxlength="5" required />
<span style="color:Red" ng-show="personForm.pincode.$error.required"> Required! </span>
<span style="color:Red" ng-show="personForm.pincode.$dirty&&personForm.pincode.$error.minlength"> Minimum 3 Characters Required </span>
<span style="color:Red" ng-show="personForm.pincode.$dirty&&personForm.pincode.$error.maxlength"> Maximum 5 Characters Allowed </span>
<br /><br />
<button type="submit">Submit Form</button><br /><br />
<span>{{msg}}</span>
</form>
</div>
</body>
</html>If you observe above code we are validating textbox control using both ng-minlength and ng-maxlength property and used other properties like $dirty, minlength, maxlength for form validations. If you want to know more about these properties check this url form validations in angularjs
Following is the result of using both ng-minlength and ng-maxlength properties to validate form input text control in angularjs applications.
This is how we can use ng-minlength and ng-maxlength directives in angularjs to implement minimum length and maximum length validations.