¡Esta es una revisión vieja del documento!
Acabamos de ver como saber si un campo o formulario es o no válido. En este tema vamos a ver las validaciones estándar que tiene angular dejando para la unidad 00_start la creación de nuevas validaciones.
AngularJs dispone de 9 tipos de validaciones distintas:
email
: El campo debe tener el formato de un correo electrónico.max
: El campo debe tener un valor máximomaxlength
: El campo debe tener un nº máximo de caracteresmin
: El campo debe tener un valor mínimominlength
: El campo debe tener un nº mínimo de caracteresnumber
: El campo debe ser un númeropattern
: El campo debe seguir una expresión regularrequired
: el campo es requeridourl
: El campo debe tener el formato de una URL
<input>
tengan la propiedad name
Pasemos ahora a ver como se aplican cada una de ellas.
Deberemos indicar en el <input>
que type=“email”
.
<input type="email" ng-model="model.email" name="email" >
Solo se aplica a <input>
cuyo type=“number”
.
Deberemos indicar la directiva max=“valor”
. Siendo valor
el valor máximo que puede tener.
<input type="number" ng-model="model.edad" name="edad" max="99" >
Solo se aplica a <input>
cuyo type=“number”
o type=“text”
.
Deberemos indicar la directiva ng-maxlength=“valor”
. Siendo valor
, el tamaño máximo que puede tener en caracteres.
<input type="text" ng-model="model.nombre" name="nombre" ng-maxlength="50" >
Solo se aplica a <input>
cuyo type=“number”
.
Deberemos indicar la directiva min=“valor”
. Siendo valor
, el valor mínimo que puede tener.
<input type="number" ng-model="model.edad" name="edad" min="18" >
Solo se aplica a <input>
cuyo type=“number”
o type=“text”
.
Deberemos indicar la directiva ng-minlength=“valor”
. Siendo valor
, el tamaño mínimo que puede tener en caracteres.
<input type="text" ng-model="model.nombre" name="nombre" ng-minlength="3" >
Deberemos indicar en el <input>
que type=“number”
.
<input type="number" ng-model="model.edad" name="edad" >
Solo se aplica a <input>
cuyo type=“number”
, type=“text”
o type=“email”
.
Deberemos indicar la directiva ng-pattern=“valor”
. Siendo valor
, la expresión regular que tiene que cumplir el valor
<input type="text" ng-model="model.nombre" name="nombre" ng-pattern="/^[a-zA-Z]*$/" >
Esta directiva permite que la expresión regular esté en una propiedad del $scope
en ese caso se debe poner así:
<input type="text" ng-model="model.nombre" name="nombre" ng-pattern="patternNombre" >
Y en $scope
indicar lo siguiente:
$scope.patternNombre=/^[a-zA-Z]*$/;
Se aplica a cualquier <input>
.
Se debe poner la directiva required
o ng-required
.
La diferencia entre ellos es que al poner required
el valor es requerido pero al poner ng-required
se le podría poner un valor al atributo ng-required
que fuera true
o false
pero que dicho valor venga del $scope
.
<input type="text" ng-model="model.nombre" name="nombre" required >
<input type="text" ng-model="model.nombre" name="nombre" ng-required="requeridoNombre" >
Es este segundo ejemplo deberíamos tener en el $scope
para que fuera requerido :
$scope.requeridoNombre=trueo para que no lo fuera:
$scope.requeridoNombre=false
Deberemos indicar en el <input>
que type=“url”
.
<input type="email" ng-model="model.email" name="email" >