The ng-minlength is used to validate the min-length
of a input field that is define by you that means what you want to your input
field minlength. i.e.
name: {
minlength: 5
}
The ng-maxlength is used to validate the max-length
of a input field that is define by you that means what you want to your field maxlength.
i.e.
name: {
maxlength: 25
}
The ng- required is used to validate the required
an input field. If a field contain length grater then zero that means its
contain some value otherwise its required. i.e.
name: {
required: true
}
The AngularJs code-sample as given
below.
var app =
angular.module("myApp",
[]);
app.controller('myCtrl', function ($scope) {
$scope.user = {
name: {
required: true,
minlength: 5,
maxlength: 25
}
}
});
The HTML code-sample as given below
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<h3>Use of ng-minlength,
ng-maxlength and ng-required in AngularJs</h3>
</div>
<form name="form">
User Name *
<input type="text" name="name" ng-model="name" ng-minlength='{{user.name.minlength}}' ng-maxlength="{{user.name.maxlength}}" ng-required='user.name.required' />
<span ng-show="form.name.$dirty
&& form.name.$error.required">Name is required!</span>
<span ng-show="form.name.$error.minlength">Input is too short!</span>
<span ng-show="form.name.$error.maxlength">Input is too long!</span>
</form>
</div>
The CSS Styles code-sample as given
below
<style>
/* Styles go here */
input[type="text"] {
width: 220px;
height: 24px;
border: 1px solid #3255cc;
border-right: 10px solid #3255cc;
}
.ng-dirty.ng-invalid {
border-color: red !important;
}
span {
color: red;
font-size: 15px;
}
</style>
The Full live demo(HTML + CSS +
AngularJs) code-sample as given below
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller('myCtrl', function ($scope) {
$scope.user = {
name: {
required: true,
minlength: 5,
maxlength: 25
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<h3>Use of ng-minlength,
ng-maxlength and ng-required in AngularJs</h3>
</div>
<form name="form">
User Name *
<input type="text" name="name" ng-model="name" ng-minlength='{{user.name.minlength}}' ng-maxlength="{{user.name.maxlength}}" ng-required='user.name.required' />
<span ng-show="form.name.$dirty
&& form.name.$error.required">Name is required!</span>
<span ng-show="form.name.$error.minlength">Input is too short!</span>
<span ng-show="form.name.$error.maxlength">Input is too long!</span>
</form>
</body>
</html>
The output: go to link http://embed.plnkr.co/2ngL0R/preview
The output look like below image
Thank you!