ng-minlength and ng-maxlength AngularJs

The ng-minlength and ng-maxlength are used to validation input textbox lengths that the ng-minlength is used to find the min lengths and ng-maxlength is max lengths both min and max are depend on your custom lengths i.e.

 pwd: {
          minlength: 6,
          maxlength: 15
};

In the below example you see the use of ng-minlength and ng-maxlength.

The AngularJs code sample

var app = angular.module("pwdApp", []);
        app.controller('pwdCtrl', function ($scope) {
            $scope.password = {
                pwd: {
                    required: true,
                    minlength: 6,
                    maxlength: 15
                }
            }
        });

The HTML code sample

<div ng-app="pwdApp" ng-controller="pwdCtrl">
    <div>
        <h3>Use of ng-minlength and ng-maxlength in AngularJs</h3>
    </div>
    <form name="myForm">
        Password *
        <input type="password" name="myPassword" ng-model="myPassword" ng-minlength='{{password.pwd.minlength}}' ng-maxlength="{{password.pwd.maxlength}}" ng-required='password.pwd.required' />
        <span ng-show="myForm.myPassword.$dirty && myForm.myPassword.$error.required">Password is required!</span>
        <span ng-show="myForm.myPassword.$error.minlength">Input is too short!</span>
        <span ng-show="myForm.myPassword.$error.maxlength">Input is too long!</span>
    </form>
</div>

The Full live example code

<!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("pwdApp", []);
        app.controller('pwdCtrl', function ($scope) {
            $scope.password = {
                pwd: {
                    required: true,
                    minlength: 6,
                    maxlength: 15
                }
            }
        });
    </script>
</head>
<body ng-app="pwdApp" ng-controller="pwdCtrl">
    <div>
        <h3>Use of ng-minlength and ng-maxlength in AngularJs</h3>
    </div>
    <form name="myForm">
        Password *
        <input type="password" name="myPassword" ng-model="myPassword" ng-minlength='{{password.pwd.minlength}}' ng-maxlength="{{password.pwd.maxlength}}" ng-required='password.pwd.required' />
        <span ng-show="myForm.myPassword.$dirty && myForm.myPassword.$error.required">Password is required!</span>
        <span ng-show="myForm.myPassword.$error.minlength">Input is too short!</span>
        <span ng-show="myForm.myPassword.$error.maxlength">Input is too long!</span>
    </form>
</body>
</html>

The output

About Blogger

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

ng-minlength and ng-maxlength AngularJs

About Blogger

0 comments:

Post a Comment

Video Of Day