Validación de formulario AngularJS

AngularJS puede validar datos de entrada.

Validación de formulario

AngularJS proporciona validación de formularios del cliente.

AngularJS monitorea el estado de los formularios y campos de entrada (input, textarea, select) y permite notificar al usuario el estado actual.

AngularJS también incluye información sobre si han sido tocados o modificados.

Puede usar atributos HTML5 estándar para validar la entrada o crear su propia función de validación.

La validación del cliente no puede proteger por sí sola la entrada del usuario. La validación del servidor también es necesaria.

required

Uso de atributo HTML5 required El campo de entrada especificado debe estar lleno:

instancia

Este campo de entrada es obligatorio:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>El estado válido de la entrada es:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Prueba por tu cuenta

email

Uso de tipo HTML5 email El valor especificado debe ser un correo electrónico:

instancia

Este campo de entrada debe ser un correo electrónico:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>El estado válido de la entrada es:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Prueba por tu cuenta

Estado del formulario y estado de entrada

AngularJS actualiza continuamente el estado del formulario y de los campos de entrada.

Los campos de entrada tienen los siguientes estados:

• $untouched Este campo no ha sido tocado
• $touched Este campo ha sido tocado
• $pristine Este campo no ha sido modificado
• $dirty Este campo ha sido modificado
• $invalid El contenido del campo es inválido
• $valid El contenido del campo es válido

Son todas propiedades de los campos de entrada, pueden ser verdaderas o falsas.

El formulario tiene los siguientes estados:

• $pristine No se ha modificado ningún campo
• $dirty Se ha modificado uno o más campos
• $invalid El contenido del formulario es inválido
• $valid El contenido del formulario es válido
• $subscribed El formulario ha sido enviado

Son todas propiedades del formulario, pueden ser verdaderas o falsas.

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 emitir una advertencia al usuario:

instancia

Si el campo ya ha sido tocado y está vacío, muestra un mensaje de error:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">El nombre es obligatorio.</span>

Prueba por tu cuenta

Clases CSS

AngularJS agrega clases CSS a los campos de formulario y de entrada según su estado.

Las siguientes clases se han agregado al campo de entrada o eliminado del campo de entrada:

• ng-untouched Este campo no ha sido tocado
• ng-touched Este campo ha sido tocado
• ng-pristine Este campo no ha sido modificado
• ng-dirty Este campo ha sido modificado
• ng-valid El contenido del campo es válido
• ng-invalid El contenido del campo es inválido
• ng-valid-key Verifica un clave cada vez. Por ejemplo:ng-valid-requiredMuy útil cuando hay varios campos obligatorios para verificar.
• ng-invalid-key Por ejemplo:ng-invalid-required

Las siguientes clases se han agregado al formulario o eliminado del formulario:

• ng-pristine No hay campos que no hayan sido modificados
• ng-dirty Se ha modificado uno o más campos
• ng-valid El contenido del formulario es válido
• ng-invalid El contenido del formulario es inválido
• ng-valid-key Verifica un clave cada vez. Por ejemplo:ng-valid-requiredMuy útil cuando hay varios campos obligatorios para verificar.
• ng-invalid-key Por ejemplo:ng-invalid-required

Si el valor representado por la clase es falseSi se eliminan estas clases.

Añada estilos a estas clases para proporcionar una interfaz de usuario mejor y más intuitiva a su aplicación.

instancia

Aplicar estilos CSS estándar:

<style>
input.ng-invalid {
  background-color: pink;
};
input.ng-valid {
  background-color: lightgreen;
};
</style>

Prueba por tu cuenta

También se puede configurar el estilo del formulario.

instancia

Aplicar estilos a los formularios originales no modificados y los modificados:

<style>
form.ng-pristine {
  background-color: lightblue;
};
form.ng-dirty {
  background-color: pink;
};
</style>

Prueba por tu cuenta

Validación personalizada

Crear una función de validación personalizada requiere algunos trucos; debe agregar una nueva directiva al aplicación y usar ciertos parámetros de procesamiento específicos para manejar la validación dentro de la función.

instancia

Cree su propia directiva, que contenga una función de validación personalizada, y utilice my-directive refiérase a él.

Este campo es válido solo 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>

Prueba por tu cuenta

En HTML, la nueva directiva se utilizará mediante la propiedad my-directive para referirse a.

En JavaScript, primero agregamos una llamada myDirective nueva directiva.

recuerde, al nombrar una directiva, debe usar notación de camelCase, como myDirectivepero al llamarlo, debe usar nombres separados por guiones, como my-directive.

luego, devuelva un objeto que especifique lo que necesitamos ngModeles decir ngModelController.

crea una función de enlace que acepta algunos parámetros, entre los cuales el cuarto es mCtrl es ngModelController.

luego especifique una función, en este caso llamada myValidationque acepta un parámetro, que es el valor del elemento de entrada.

compruebe si el valor contiene la letra "e" y configure la validez del controlador de modelo true o false.

finalmente,mCtrl.$parsers.push(myValidation); will be myValidation Function added to an array of other functions, which will be executed each time the input value changes.

Validation Example

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/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 = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

Prueba por tu cuenta

Atributo de formulario HTML novalidate Usado para deshabilitar la validación predeterminada del navegador.

Ejemplo de explicación:

Directivas de AngularJS ng-model Vincula el elemento de entrada al modelo.

El objeto del modelo tiene dos propiedades:user y email.

debido a ng-showsolo cuando user o email sea $dirty y $invalid Solo se mostrarán los spans con color:rojo.