AngularJS ng-pattern Directive
Last Updated :
21 Feb, 2023
The ng-pattern Directive in AngularJS is used to add up pattern (regex pattern) validator to ng-Model on an input HTML element. It is used to set the pattern validation error key if input field data does not match a RegExp that is found by evaluating the Angular expression specified in the ng-pattern attribute value.
Syntax:
<element ng-pattern="expression">
Contents...
</element>
Example 1: This example implements the ng-pattern Directive to check the password pattern.
HTML
<!DOCTYPE html>
<html>
<head>
<title>ng-pattern Directive</title>
<script src=
</script>
<style>
.red {
color: red
}
.green {
color: green
}
</style>
</head>
<body ng-app="app" style="text-align:center">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>ng-pattern Directive</h2>
<div ng-controller="geek">
<ng-form name="pass">
Password:
<input type="password"
ng-model="password"
name="password"
ng-pattern="re" /><br>
<span ng-show="pass.password.$error.pattern"
style="color:red">
Not valid password.
</span><br>
Confirm:
<input type="password"
ng-model="repass"
ng-keyup="compare(repass)"
name="repass"
ng-pattern="re" /><br>
<span ng-show="isconfirm || pass.repass.$dirty "
ng-class="{true:'green',false:'red'}[isconfirm]">
Password {{isconfirm==true?'':'not'}} match
</span>
</ng-form>
</div>
<script>
var app = angular.module("app", []);
app.controller('geek', ['$scope', function ($scope) {
$scope.re = /^[a-zA-Z]\w{3,14}$/;
$scope.compare = function (repass) {
$scope.isconfirm = $scope.password == repass ?
true : false;
}
}]);
</script>
</body>
</html>
|
Output: The below output illustrates an invalid Input, when the Input doesn’t Match, & the Valid Input.
Example 2: This example shows an error if the input is anything other than a number.
HTML
<!DOCTYPE html>
<html>
<head>
<title>ng-pattern Directive</title>
<script src=
</script>
</head>
<body ng-app="app" style="text-align:center">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>ng-pattern Directive</h2>
<div ng-controller="geek">
<ng-form name="num">
Input Number:
<input type="text"
ng-model="number"
name="number"
ng-pattern="re" /><br />
<span ng-show="num.number.$error.pattern"
style="color:red">
Input is not valid.
</span>
</ng-form>
</div>
<script>
var app = angular.module("app", []);
app.controller('geek', ['$scope', function ($scope) {
$scope.re = /^[0-9]{1,6}$/;
}]);
</script>
</body>
</html>
|
Output: From the output, when the input is the text & when the Input is a number:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...