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

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..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.