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!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
