Angularjs input pattern example
This example is using ng-pattern for Number, Text only and Date type.Please follow this code to know how to apply ng-pattern. If you try to input incorrect data the form will be invalid and text on it changes to RED.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Ng-pattern in AngualarJS</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<style>
.ng-invalid {
color: red;
}
</style>
<script>
angular.module('myapp', [])
.controller('ExampleController', ['$scope', function ($scope) {
}]);
</script>
</head>
<body ng-app="myapp">
<h1>Apply ng-pattern in AngualarJS</h1>
<form name="myForm" ng-submit="login()">
<div id="simple" ng-controller="ExampleController">
<h3 >Number ng-pattern</h3>
<p>Please input a number</p>
<input ng-model="number" ng-pattern="/^\d+$/"/>
<hr />
<h3>Date ng-pattern</h3>
<p>Please input Date with format "MM/DD/YYYY"</p>
<input ng-model="dateformat" ng-pattern="/^(0?[1-9]|1[012])\/(0?[1-9]|[12][0-9]|3[01])\/(199\d|[2-9]\d{3})$/" />
<hr/>
<h3>Text only ng-pattern</h3>
<p>Please input Text only</p>
<input ng-model="Textonly" ng-pattern="/^(\D)+$/" />
</div>
</form>
</body>
</html>
Thanks for your time reading
Hi,
ReplyDeleteif one condition is failed then it should become red only that portion , why everything is becoming red ..??
스포츠토토 Hi to all, it’s in fact a nice for me to pay a visit this web page, it consists of useful Information
ReplyDeletevery cool post, i actually love this web site, carry on it 온라인카지노
ReplyDelete