ng-maxlength and ng-required in AngularJs

ng-minlength, ng-maxlength and ng-required in AngularJs

The ng-minlength, ng-maxlength and ng-required are used to validate the input field.

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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.