Hoy vamos a ver como crear y validar formularios en Angular 2 de forma muy sencilla.
Lo haremos todo sobre app.component.ts en su plantilla vamos a crear un formulario.
Le vamos a poner un nombre al formulario y le indicaremos que es un formulario de Angular así:
#usuarioForm="ngForm"
Utilizaremos el evento submit para lanzar un método cuando se envié el formulario así:
(ngSubmit)="onSubmit()"
Definiremos los inputs y le pondremos nombre, por ejemplo así:
#nombre="ngForm"
Haremos que Angular controle la validación del campo usando ngControl, usaremos el Two Way Data Binding etc.
Veamos como crear y validar formularios en Angular 2:
// Importamos el componente Component del core de Angular
import { Component } from '@angular/core';
//Definimos los metadatos(selector, plantilla, etc) del componente
@Component({
selector: 'my-app',
template: `
<h1>Formularios y validación en Angular 2</h1>
<!-- Le ponemos nombre al formulario y cuando se envié que lance un método -->
<form #usuarioForm="ngForm" (ngSubmit)="onSubmit()" class="col-md-4">
<p>
<label>Nombre:</label>
<!-- le ponemos nombre a este input, con ngControl hacemos un control de la validación, hacemos un two way databinding con ngModel y definimos unas reglas de validación html5-->
<input class="form-control" type="text" #nombre="ngForm" ngControl="nombre" [(ngModel)]="usuario.nombre" required minlength="4" />
<!-- Comprobamos si el campo está modificado y es válido para mostrar un mensaje -->
<span *ngIf="!nombre.valid && nombre.touched">El nombre es obligatorio</span>
</p>
<p>
<label>Apellidos:</label>
<input class="form-control" type="text" #apellidos="ngForm" ngControl="apellidos" [(ngModel)]="usuario.apellidos" required pattern="[A-Za-z]*"/>
<span *ngIf="!apellidos.valid && apellidos.touched">Los apellidos son obligatorios</span>
</p>
<p>
<label>Email:</label>
<input class="form-control" type="email" #email="ngForm" ngControl="email" [(ngModel)]="usuario.email" required/>
<span *ngIf="!email.valid && email.touched">El email es obligatorio</span>
</p>
<p>
<label>Contraseña:</label>
<input class="form-control" type="password" #password="ngForm" ngControl="password" [(ngModel)]="usuario.password" required />
<span *ngIf="!password.valid && password.touched">La contraseña es obligatorio</span>
</p>
<input type="submit" value="Enviar" class="btn btn-success" />
</form>
`
})
export class AppComponent {
public usuario;
constructor(){
// Definimos el objeto usuario, vació inicialmente (necesario)
this.usuario = {
"nombre": "",
"apellidos": "",
"email": "",
"password": ""
};
}
onSubmit(){
// Mostramos el objeto usuario
console.log(this.usuario);
}
}
Ahora si lanzamos esto en el navegador cuando enviemos el formulario en la consola del navegador nos devolverá el objeto con los datos del formulario.
Esto es todo, así de simple se trabaja con los formularios en Angular 2.
