Los formularios son la piedra angular
de nuestra aplicaciones, ya sean de escritorio, moviles o web, esto equivale a una interaccion entre el usuario y nuestra aplicacion, independiente de su fin, es la manera idónea con la que el usuario se puede comunicar con nuestra aplicacion.
Por consiguiente es de vital importancia validar la informacion que el usuario introduce en nuestros formularios, para evitar o prevenir posibles errores con dicha informacion. De igual manera es una excelente practica de experiencia de usuario, mostrarle o informarle al usuario que esta introduciendo un dato incorrecto o que se espera algun tipo de respuesta diferente.
Actualmente en Angular existen dos modos de validar los formularios, por modelo y por template, este ejemplo es por template o plantilla, puedes revisar el siguiente tutorial para aplicar tus validaciones en el modelo.
Los siguientes pasos son para ilustrar una manera rapida y sencilla de validar nuestros formularios haciendolos dinamicos, usando FormsModule
y ngModel
. Debido que por defecto Angular solo nos provee 4 tipos diferentes de validaciones (required | minlength | maxlength | pattern)
haremos uso de la libreria ng2-validation para tener acceso a una mayor cantidad de validadores, en cada input mostraremos un mensaje de error.
- Instala
ng2-validation
en tu proyecto de Ionic
npm install ng2-validation --save
- Importa los archivos necesarios en tu modulo y agregalos en el array de imports.
app.module.ts
import { FormsModule } from '@angular/forms';
import { CustomFormsModule } from 'ng2-validation';
@NgModule({
...
imports: [
...
FormsModule
CustomFormsModule
],
...
})
- Crea tu modelo e inicializalo como un objeto vacio en el controlador de tu vista.
home.ts
...
miModelo: any;
constructor(...){
...
this.miModelo = {};
}
- Agrega las directivas pertinentes a cada input para validarlo.
home.html
- Numero
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" number/> <p *ngIf="field.errors?.number">error message</p>
- Correo
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" email/> <p *ngIf="field.errors?.email">error message</p>
- Url
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" url/> <p *ngIf="field.errors?.url">error message</p>
- Fecha
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" url/> <p *ngIf="field.errors?.url">error message</p>
- Usa las directivas y validaciones con componentes de Ionic.
<ion-item>
<ion-label floating>Label flotante</ion-label>
<ion-input type="text" [(ngModel)]="miModelo.campo" name="campo" #campo="ngModel" required></ion-input>
</ion-item>
<p ion-text color="danger" *ngIf="campo.errors">ERRORES: {{ campo.errors | json}}</p>
- Agrega mensajes personalizados a los errores.
<ion-item>
<ion-label floating>Campo</ion-label>
<ion-input type="text" [(ngModel)]="miModelo.campo" name="campo" #campo="ngModel" required></ion-input>
</ion-item>
<div class="form-error" *ngIf="campo.errors && (campo.dirty || campo.touched)">
<p color="danger" [hidden]="!campo.errors.required">Campo requerido.</p>
</div>
Recomendamos revisar la documentacion de
ng2-validation
para ver todas las directivas y modos de uso disponibles.
Probado en Ionic 3.0.1 Y Angular 4.0.0