Saltar al contenido

Tutorial angular de validación de formularios (con plantillas) jul 25thIn este tutorial, vamos a aprender acerca de cómo validar la …

marzo 13, 2020

 

En este tutorial, vamos a aprender sobre cómo validar los drivenforms plantilla en angular.

Nota: En el último tutorial, hemos aprendido sobre el manejo de forma angular en el enfoque basado en plantillas. campo de entrada

Validando

en formas basados ​​en plantillas, angular crea un objeto FormControl en base a los nativos validationattributes HTML 5 de forma que estamos utilizando en el elemento (ejemplo: es necesario, longitud min).

Nos puede acceder al objeto FormControl mediante el establecimiento de una variable local para ngModel referencia. Ejemplo

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
user = {
name: '',
email: '',
password: '',
cpassword: ''
};
constructor() {}
}

en que el código anterior, hemos añadido nativa html 5 atributo de validación requerido y el nombre # = ngModel.

Al añadir este carreras angulares una validación cuando una forma de cambios de valor y genera la lista de errorslike inválida, tocado, sin tocar, prístino, sucio y los errores de objeto válidos,.

  • válido: Esta propiedad es cierto cuando un valor es válido.
  • no válido: Esta propiedad es cierto cuando un valor no es válida.
  • tocó: Esta propiedad es cierto cuando se hace clic en un elemento de entrada.
  • prístina: Esta propiedad es cierto cuando no se cambia un valor.
  • sucia: Esta propiedad es cierto cuando se cambia un valor. Se requiere elemento PA

mensajes de error Viendo

Name is required

En el código anterior, hemos añadido con el mensaje de error Nombre y partimos [escondido] = “name.valid || name.pristine” que significa mensaje de error se oculta cuando una valor de entrada isValid y el valor no es cambiada por el usuario todavía. Salida

campo de correo electrónico

Validando

Mediante la adición de un atributo de correo electrónico a elemento de entrada angular añade los validadores de correo electrónico a thatelement.

vamos a actualizar nuestro formulario mediante la adición de un campo de correo electrónico.

Name is required

Please enter valid email

salida

Aquí he entrado en un correo electrónico equivocado así se muestra el mensaje de error.

Validación de contraseñas de actualización de

Let nuestro formulario mediante la adición de dos campos de entrada con nombre contraseña y Confirmar contraseña.

Name is required

Please enter valid email

Password length should be 6

Passwords should match

Aquí hemos utilizado esta condición pass.value === cpass.value para validar la contraseña de confirmación. salida

enviar el formulario

Para enviar un formulario angular nos proporciona una propiedad de evento ngSubmit.

En el siguiente código, que añadió Directiva ngForm al elemento de formulario haciendo referencia a la variable myform local. Directiva

ngForm mantiene todos los controles que hemos creado utilizando la directiva ngModel, incluyendo su validez. También tiene su propia propiedad no válido lo cual es falso sólo si cada control contenida es válida. Salida

Name is required

Please enter valid email

Password length should be 6


Passwords should match

botón

Registrar sólo se activa si todos los elementos de entrada están llenos de datos válidos.

Código

repository