La directiva ng-pattern en AngularJS se usa para agregar un validador de patrón (patrón regex) a ngModel en el elemento HTML de entrada. Se utiliza para establecer la clave de error de validación del patrón si los datos del campo de entrada no coinciden con una expresión regular que se encuentra al evaluar la expresión angular especificada en el valor del atributo ngpattern.
Sintaxis:
<element ng-pattern="expression"> Contents... </element>
Ejemplo 1: este ejemplo utiliza la directiva ng-pattern para comprobar el patrón de la contraseña.
<!DOCTYPE html>
<html>
<head>
<title>ng-pattern Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
</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 style="">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>
Producción:
- Entrada inválida:
- La entrada no coincide:
- Entrada válida:
Ejemplo 2: este ejemplo muestra un error si la entrada no es un número.
<!DOCTYPE html>
<html>
<head>
<title>ng-pattern Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
</script>
</head>
<body ng-app="app" style="text-align:center">
<h1 style="color:green;">GeeksforGeeks</h1>
<h2 style="">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>
Producción:
- La entrada es texto:
- La entrada es el número:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA