8.2 Validaciones

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áximo
• maxlength: El campo debe tener un nº máximo de caracteres
• min: El campo debe tener un valor mínimo
• minlength: El campo debe tener un nº mínimo de caracteres
• number: El campo debe ser un número
• pattern: El campo debe seguir una expresión regular
• required: el campo es requerido
• url: El campo debe tener el formato de una URL

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”. 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=true

$scope.requeridoNombre=false

Deberemos indicar en el <input> que type=“url”.

<input type="url" ng-model="model.sitioweb" name="sitioweb"  >