Validaciones avanzadas y personalizadas de formularios en Ionic 3 y Angular 4

1_README.md

Validaciones avanzadas y personalizadas de formularios en Ionic 3 y Angular 4

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.

1. Instala ng2-validation en tu proyecto de Ionic

npm install ng2-validation --save

2. 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
  ],
  ...
})

3. Crea tu modelo e inicializalo como un objeto vacio en el controlador de tu vista. home.ts

...
  miModelo: any;
  constructor(...){
    ...
    this.miModelo = {};
  }

4. 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>

5. 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>

6. 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

Enlaces recomendados:

• https://angular.io/docs/ts/latest/guide/forms.html
• https://angular.io/docs/ts/latest/cookbook/form-validation.html
• http://learnangular2.com/forms/
• https://www.joshmorony.com/advanced-forms-validation-in-ionic-2/
• https://github.com/yuyang041060120/ng2-validation

2_app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { FormsModule } from '@angular/forms';      // Modulo de angular para los formularios.
import { CustomFormsModule } from 'ng2-validation' // ng2-validation

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    FormsModule,      // Esto le da acceso a la aplicación a todas las características de formularios de plantilla, incluyendo ngModel.
    CustomFormsModule // Validación personalizadas de formularios en Angular, inspirada en la validación de jQuery.
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

3_home.ts

import { Component} from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
 
@Component({
  selector:    'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  myModel: any; // Modelo de datos.

  constructor(
    public navCtrl:   NavController,
    public alertCtrl: AlertController
  ){
    this.myModel = {}; // Inicializacion del modelo como un objeto vacio.
  }

  ionViewDidLoad(){ }
}
   

4_home.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Validaciones de formulario.
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <form novalidate>
    <ion-list>
      <!-- SOLO TEXTO -->
      <ion-item>
        <ion-label floating>Solo texto</ion-label>
        <ion-input type="text" [(ngModel)]="miModelo.soloTexto" name="soloTexto" #soloTexto="ngModel" pattern="[a-zA-Z]*" required></ion-input>
      </ion-item>
      <p ion-text color="danger" *ngIf="soloTexto.errors">ERRORES: {{ soloTexto.errors | json}}</p>
      <!-- SOLO TEXTO -->

      <!-- SOLO NUMERO -->
      <ion-item>
        <ion-label floating>Solo numero</ion-label>
        <ion-input type="text" [(ngModel)]="miModelo.solonumero" name="solonumero" #solonumero="ngModel" required digits></ion-input>
      </ion-item>
      <p ion-text color="danger" *ngIf="solonumero.errors">ERRORES: {{ solonumero.errors | json}}</p>
      <!-- SOLO NUMERO -->

      <!-- CORREO -->
      <ion-item>
        <ion-label floating>Correo</ion-label>
        <ion-input type="text" [(ngModel)]="miModelo.correo" name="correo" #correo="ngModel" required email></ion-input>
      </ion-item>
      <p color="danger" *ngIf="correo.errors">ERRORES: {{ correo.errors | json}}</p>
      <!-- CORREO -->

      <!-- CONTRASEÑA: CANTIDAD MINIMA -->
      <ion-item>
        <ion-label floating>Contraseña</ion-label>
        <ion-input type="password" [(ngModel)]="miModelo.contrasena" name="contrasena" #contrasena="ngModel" required minlength="6"></ion-input>
      </ion-item>
      <p ion-text color="danger" *ngIf="contrasena.errors">ERRORES: {{ contrasena.errors | json}}</p>
      <!-- CONTRASEÑA -->

      <!-- CONFIRMAR CONTRASEÑA: CAMPO IGUAL A OTRO -->
      <ion-item>
        <ion-label floating>Confirmar contraseña</ion-label>
        <ion-input type="password" [(ngModel)]="miModelo.confirmContrasena" name="confirmContrasena" #confirmContrasena="ngModel" required [equalTo]="contrasena"></ion-input>
      </ion-item>
      <p ion-text color="danger" *ngIf="confirmContrasena.errors">ERRORES: {{ confirmContrasena.errors | json}}</p>
      <!-- CONFIRMAR CONTRASEÑA -->

      <!-- URL -->
      <ion-item>
        <ion-label floating>Url</ion-label>
        <ion-input type="text" [(ngModel)]="miModelo.url" name="url" #url="ngModel" required url></ion-input>
      </ion-item>
      <p ion-text color="danger" *ngIf="url.errors">ERRORES: {{ url.errors | json}}</p>
      <!-- URL -->

      <!-- EDAD: NUMERO MAYOR, MENOR IGUAL QUE -->
      <ion-item>
        <ion-label floating>Edad entre 18 y 120</ion-label>
        <ion-input type="text" [(ngModel)]="miModelo.edad" name="edad" #edad="ngModel" required digits gte="18" lte="120"></ion-input>
      </ion-item>
      <p ion-text color="danger" *ngIf="edad.errors">ERRORES: {{ edad.errors | json}}</p>
      <!-- EDAD: NUMERO MAYOR, MENOR IGUAL QUE -->
      
      <!-- FECHAS -->
      <ion-item>
        <ion-label floating>Fecha entre 1897 y 1999</ion-label>
        <ion-input type="text" [(ngModel)]="miModelo.fecha" name="fecha" #fecha="ngModel" required date minDate="1897-01-01" maxDate="1999-12-31"></ion-input>
      </ion-item>
      <p ion-text color="danger" *ngIf="fecha.errors">ERRORES: {{ fecha.errors | json}}</p>
      <!-- FECHAS -->

      <!-- MENSAJE PERSONALIZADO -->
      <ion-item>
        <ion-label floating>Correo con mensajes personalizados</ion-label>
        <ion-input type="text" [(ngModel)]="miModelo.correo2" name="correo2" #correo2="ngModel" required email></ion-input>
      </ion-item>
      <div class="form-error" *ngIf="correo2.errors && (correo2.dirty || correo2.touched)">
        <p color="danger" [hidden]="!correo2.errors.required">Campo requerido.</p>
        <p color="danger" [hidden]="!correo2.errors.email">Correo invalido.</p>
      </div>
      <!-- MENSAJE PERSONALIZADO -->
    
    </ion-list>
  </form>
</ion-content>