AngularJS ng-minlength, ng-maxlength for Form Validation

  Total Views : 1779
  Comments : 0
 
  Keywords : Angularjs minimum length, maximum length form validations using ng-minlength, ng-maxlength directive, Angularjs prevent form submission if validation fails for ng-minlength and ng-maxlength

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.

AngularJS ng-minlength, ng-maxlength Directives

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. 

Angularjs Form Validation with ng-minlength

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.

Syntax of AngularJS ng-minlength for Form Validation

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.

Example of AngularJS ng-minlength for Form Validation

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.

 

Live Preview

<!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.

Output of AngularJS ng-minlength for Form Validation

Following is the result of using ng-minlength property to validate form input text control in angularjs applications.

 

Angularjs ng-minlength form validation example result or output

AngularJS ng-maxlength for form validation

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.

Syntax of AngularJS ng-maxlength for Form Validation

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.

Example of AngularJS ng-maxlength for Form Validation

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. 

 

Live Preview

<!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.

Output of AngularJS ng-maxlength for Form Validation

Following is the result of using ng-maxlength property to validate form input text control in angularjs applications.

 

Angularjs ng-maxlength form validation example

We will see how to use both ng-minlength and ng-maxlength angularjs properties to validate form input text control with example.

AngularJS Both ng-minlength & ng-maxlength Example

Following is the example of validating input control with both ng-minlength and ng-maxlength properties in angularjs application.

 

Live Preview

<!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

Output of AngularJS ng-minlength, ng-maxlength

Following is the result of using both ng-minlength and ng-maxlength properties to validate form input text control in angularjs applications.

 

Angularjs Example to use Both ng-minlength, ng-maxlength Result or Output

This is how we can use ng-minlength and ng-maxlength directives in angularjs to implement minimum length and maximum length validations.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User