Validación de Formularios

En este ejercicio vamos a crear un formulario en angular y explicar unas propiedades que nos dan informacion acerca del estatus actual del formulario que estamos llenando.

1) Vamos a utilizar el mismo ejemplo de los post anteriores Post Anterior

2) En nuestro archivo app.component vamos a agregar un metodo llamado onSubmit, que detecta cuando hacemos click en el boton "enviar"

import { Component } from '@angular/core';
export interface IUserForm {
  name: string;
  email: string;
  password: string;
  confirmPassword: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'example1'; 

  constructor() {  } 

  onSubmit(userForm: IUserForm) {
    console.log(userForm);
  }
}

3) en nuestro archivo html vamos a agregar el siguiente fomrulario

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value)" ngNativeValidate>
  <div>
    <label for="name">Nombre</label>
    <input type="text" id="name" name="name" ngModel>
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" ngModel required #propertyTest="ngModel">
  </div>
  <div>
    <label for="password">Contraseña</label>
    <input type="password" id="password" name="password" ngModel>
  </div>
  <div>
    <label for="confirmPassword">Confirmar Contraseña</label>
    <input type="password" id="confirmPassword" name="confirmPassword" ngModel>
  </div>
  <div>
    <button type="submit">Enviar</button>
  </div>

4) Si quieres ver que data vas a enviar al método OnSubmit, puede agregar este código y ver la data que se esta agregando a medida que vas llenando el formulario

  {{userForm.value | json}}

5) Se vería de la siguiente manera en el navegador

6) Existen propiedades que nos sirven para ver si el formulario ha sido actualizado, si es valido, etc..

esas propiedades son las siguientes

• Dirty : La clase ng-dirty indica que el usuario ha ensuciado (modificado) el control.
• Pristine : La clase ng-pristine indica que el usuario no ha modificado el control cuando cargó la página.
• Touched : La clase ng-touched indica que el usuario ha tocado el control (No necesariamente actualizo la información).
• Untouched : La clase ng-untouched indica que el usuario no ha tocado el control
• Valid : La clase ng-valid indica que el control es válido.
• Invalid : La clase ng-invalid indica que el control es inválido.

7) al cargar la pagina los valores son los siguientes:

8) Al llenar la información ya los valores de las propiedades nos muestra lo siguiente