¡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.correo" name="correo" >
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”
o <textarea>
.
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”
o <textarea>
.
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”
o <textarea>
.
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>
, <select>
o <textarea>
.
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="url" ng-model="model.sitioweb" name="sitioweb" >
Ahora que ya sabemos como poner las validaciones falta saber si una validación ha fallado. Hay dos formas de saberlo:
Si sabemos un campo, podemos averiguar las validaciones que ha fallado. Para explicarlo vamos a hacerlo con unos ejemplos:
Si queremos saber si ha fallado la validación de required
en el campo nombre
del formulario miFormulario
deberemos ver el valor de la siguiente expresión:
$scope.miFormulario.nombre.$error.required
true
es que la validación ha fallado y no está el valorfalse
es que la validación es correcta y tiene valorundefined
es que no se está validando la validación de required
Si queremos saber si ha fallado la validación de email
en el campo correo
del formulario miFormulario
deberemos ver el valor de la siguiente expresión:
$scope.miFormulario.correo.$error.email
true
es que la validación ha fallado y el valor no es un correo electrónicofalse
es que la validación es correcta y el valor es un correo electrónicoundefined
es que no se está validando la validación de email
Lo que nos retorna la expresión $scope.miFormulario.nombre
o $scope.miFormulario.correo
son objetos de tipo NgModelController sobre los que podremos acceder a todas sus propiedades.
Podemos saber dado un tipo de validación cuantos campos no cumplen esa validación.Para explicarlo vamos a hacerlo con unos ejemplos:
Si queremos saber cuantos campos han fallado la validación de required
del formulario miFormulario
deberemos ver el valor de la siguiente expresión:
$scope.miFormulario.$error.requiredEl resultado es esta expresión
false
es que no hay ningún campo que incumpla dicha validación.undefined
es que ningún campo está validando esa validación. Es nuestro ejemplo es que nadie ha puesto required
en ningún campo.
Si queremos saber cuantos campos han fallado la validación de email
del formulario miFormulario
deberemos ver el valor de la siguiente expresión:
$scope.miFormulario.$error.emailEl resultado es esta expresión
false
es que no hay ningún campo que incumpla dicha validación.undefined
es que ningún campo está validando esa validación. Es nuestro ejemplo es que no hay campos del tipo type=“email”