python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions