What is ng-pattern? How to use ng-pattern in AngularJs?

The ng-pattern is used to validate the input field with the help of regular expressions. Its return true if field is validate as per expressions otherwise return false.

The example in detail as given below

The AngularJs code-sample

var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.IsValid = function () {
                alert("Price Is valid and form  is submitted.");
            }
        });

The HTML code-sample
<div ng-app="myApp">
    <div ng-controller="formCtrl">
        <form name="valForm" ng-submit="IsValid()">
            <input type="number" ng-model="val" name="val" ng-pattern="/^\d{0,9}(\.\d{1,9})?$/" required>
            <input type="submit" value="submit" />
        </form>
    </div>
</div>

The Live demo code-sample
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.IsValid = function () {
                alert("Price Is valid and form  is submitted.");
            }
        });
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="formCtrl">
        <form name="valForm" ng-submit="IsValid()">
            <input type="number" ng-model="val" name="val" ng-pattern="/^\d{0,9}(\.\d{1,9})?$/" required>
            <input type="submit" value="submit" />
        </form>
    </div>
</body>
</html>

The output:

About Blogger

ANIL SINGH

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

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book