Validación de formulario AngularJS
AngularJS puede validar datos de entrada.
Validación de formulario
AngularJS ofrece validación de formularios del lado del cliente.
AngularJS supervisa el estado del formulario y los campos de entrada (entrada, área de texto, selección) y le permite notificar al usuario sobre el estado actual.
AngularJS también contiene información sobre si se han tocado, modificado o no.
Puede usar atributos estándar de HTML5 para validar la entrada o puede crear sus propias funciones de validación.
La validación del lado del cliente no puede por sí sola asegurar la entrada del usuario. La validación del lado del servidor también es necesaria.
Requerido
Use el atributo HTML5 requiredpara especificar que el campo de entrada debe completarse:
Ejemplo
El campo de entrada es obligatorio:
<form name="myForm">
<input name="myInput" ng-model="myInput"
required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Correo electrónico
Utilice el tipo HTML5 emailpara especificar que el valor debe ser un correo electrónico:
Ejemplo
El campo de entrada tiene que ser un correo electrónico:
<form name="myForm">
<input name="myInput" ng-model="myInput"
type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Estado de formulario y estado de entrada
AngularJS actualiza constantemente el estado tanto del formulario como de los campos de entrada.
Los campos de entrada tienen los siguientes estados:
$untouchedEl campo aún no ha sido tocado.$touchedEl campo ha sido tocado$pristineEl campo aún no ha sido modificado.$dirtyEl campo ha sido modificado.$invalidEl contenido del campo no es válido.$validEl contenido del campo es válido.
Todas son propiedades del campo de entrada y son true
o false.
Los formularios tienen los siguientes estados:
$pristineNingún campo ha sido modificado todavía$dirtyUno o más han sido modificados$invalidEl contenido del formulario no es válido.$validEl contenido del formulario es válido.$submittedEl formulario se envía
Todas son propiedades de la forma y son true
o bien false.
Puede usar estos estados para mostrar mensajes significativos al usuario. Por ejemplo, si un campo es obligatorio y el usuario lo deja en blanco, debe advertir al usuario:
Ejemplo
Mostrar un mensaje de error si se ha tocado el campo Y está vacío:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched
&& myForm.myName.$invalid">The name is required.</span>
Clases CSS
AngularJS agrega clases de CSS a formularios y campos de entrada según sus estados.
Las siguientes clases se agregan o eliminan de los campos de entrada:
ng-untouchedEl campo aún no ha sido tocado.ng-touchedEl campo ha sido tocadong-pristineEl campo aún no ha sido modificado.ng-dirtyEl campo ha sido modificado.ng-validEl contenido del campo es válido.ng-invalidEl contenido del campo no es válido.ng-valid-keyUna clave para cada validación. Ejemplo:ng-valid-required, útil cuando hay más de una cosa que se debe validarng-invalid-keyEjemplo:ng-invalid-required
Las siguientes clases se agregan o eliminan de los formularios:
ng-pristineNingún campo no ha sido modificado todavíang-dirtyUno o más campos han sido modificadosng-validEl contenido del formulario es válido.ng-invalidEl contenido del formulario no es válido.ng-valid-keyUna clave para cada validación. Ejemplo:ng-valid-required, útil cuando hay más de una cosa que se debe validarng-invalid-keyEjemplo:ng-invalid-required
Las clases se eliminan si el valor que representan es false.
Agregue estilos para estas clases para darle a su aplicación una interfaz de usuario mejor y más intuitiva.
Ejemplo
Aplicar estilos, usando CSS estándar:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
Los formularios también se pueden diseñar:
Ejemplo
Aplique estilos para formularios no modificados (prístinos) y para formularios modificados:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
Validación personalizada
Crear su propia función de validación es un poco más complicado; Debe agregar una nueva directiva a su aplicación y lidiar con la validación dentro de una función con ciertos argumentos específicos.
Ejemplo
Cree su propia directiva, que contenga una función de validación personalizada, y consúltela mediante my-directive.
El campo solo será válido si el valor contiene el carácter "e":
<form name="myForm">
<input name="myInput" ng-model="myInput" required
my-directive>
</form>
<script>
var app = angular.module('myApp',
[]);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element,
attr, mCtrl) {
function myValidation(value)
{
if (value.indexOf("e") > -1)
{
mCtrl.$setValidity('charE',
true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>
Ejemplo explicado:
En HTML, se hará referencia a la nueva directiva mediante el atributo
my-directive.
En JavaScript comenzamos agregando una nueva directiva llamada myDirective.
Recuerde, al nombrar una directiva, debe usar un nombre camel case,
myDirective, pero al invocarla, debe usar -un nombre separado,
my-directive.
Luego, devuelva un objeto donde especifique que requerimos ngModel, que es el ngModelController.
Haga una función de enlace que tome algunos argumentos, donde el cuarto argumento, mCtrl, es ngModelController,
Luego especifique una función, en este caso llamada myValidation, que toma un argumento, este argumento es el valor del elemento de entrada.
Pruebe si el valor contiene la letra "e" y establezca la validez del controlador del modelo en trueo false.
Por último, mCtrl.$parsers.push(myValidation);agregará la
myValidationfunción a una matriz de otras funciones, que se ejecutarán cada vez que cambie el valor de entrada.
Ejemplo de validación
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp"
ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user"
required>
<span style="color:red" ng-show="myForm.user.$dirty &&
myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username
is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span
style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl',
function($scope) {
$scope.user = 'John Doe';
$scope.email = '[email protected]';
});
</script>
</body>
</html>
El atributo de formulario HTML novalidate se usa para deshabilitar la validación predeterminada del navegador.
Ejemplo explicado
La directiva ng-model de AngularJS vincula los elementos de entrada al modelo.
El objeto modelo tiene dos propiedades: usuario y correo electrónico .
Debido a ng-show , los intervalos con color: red se muestran solo cuando el usuario o el correo electrónico están $sucios y $inválidos .