Menu

Formularios con Ionic

formsdemosionic2 - May 02, 2017 por Nicolas Molina
ionic3.3.0ionic-native3.10.3ionic-app-scripts1.3.7cordova-cli7.0.1ionic-cli3.3.0

La forma más común de capturar información de los usuarios es a partir de Formularios y depende de una buena UI/UX ganar o perder un usuario en nuestra aplicación.

Por eso es de vital importancia hacer un buen manejo de ellos, tener las validaciones adecuadas y por esto Angular nos ofrece FormBuilder, una clase que nos provee una completa herramienta para controlar y validar formularios de forma muy eficiente y sencilla.

Actualización (02/05/2017)


Hemos actualizado este demo con el último release de Ionic 3, si aún estas en alguna de las versiones anteriores puedes seguir estos pasos de Ionic 2 a Ionic 3.

Ademas en este demo usamos la función de lazy loading y @IonicPage. Puedes ver el repositorio Demo101


Cómo ionic usa Angular, podremos usar la clase FormBuilder con los componentes del SDK de ionic. Para lograr esto debemos inyectar a FormBuilder como dependencia a nuestro constructor, así:

...
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@IonicPage()
@Component({
  selector: 'page-form',
  templateUrl: 'my-form.html',
})
export class MyFormPage {

  myForm: FormGroup;
  
  constructor(
    public navCtrl: NavController,
    public formBuilder: FormBuilder
  ) {
  ...
}

Ahora creamos el método privado createMyForm para crear el formulario, haciendo uso de nuestra variable this.formBuilder podremos crear un controlador para cada uno de nuestros campos en el formulario, aquí podremos enviar validaciones tan sencillas o complejas como queramos, así:

private createMyForm(){
  return this.formBuilder.group({
    name: ['', Validators.required],
    lastName: ['', Validators.required],
    email: ['', Validators.required],
    dateBirth: ['', Validators.required],
    passwordRetry: this.formBuilder.group({
      password: ['', Validators.required],
      passwordConfirmation: ['', Validators.required]
    }),
    gender: ['', Validators.required],
  });
}

Como resultado tenemos la clase completa así:

import { Component } from '@angular/core';
import { IonicPage , NavController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@IonicPage()
@Component({
  selector: 'page-form',
  templateUrl: 'my-form.html',
})
export class MyFormPage {

  myForm: FormGroup;
  
  constructor(
    public navCtrl: NavController,
    public formBuilder: FormBuilder
  ) {
    this.myForm = this.createMyForm();
  }
  
  saveData(){
    console.log(this.myForm.value);
  }
  
  private createMyForm(){
    return this.formBuilder.group({
      name: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', Validators.required],
      dateBirth: ['', Validators.required],
      passwordRetry: this.formBuilder.group({
        password: ['', Validators.required],
        passwordConfirmation: ['', Validators.required]
      }),
      gender: ['', Validators.required],
    });
  }
}

Ahora para agregar el controlador de nuestro formulario debemos asignar dentro formGroup la instancia de myForm, además debemos asignar un método para recibir la información, así:

<form [formGroup]="myForm" (ngSubmit)="saveData()">
...
</form>

Por último por cada campo que tengamos debemos usar formControlName para asignar el controlador en cada campo, así:

<ion-item>
  <ion-icon name="person" item-left></ion-icon>
  <ion-label stacked>Nombres:</ion-label>
  <ion-input formControlName="name" type="text" placeholder="Nombre"></ion-input>
</ion-item>

Todo el template como resultado quedará así:

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Formulario</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <form [formGroup]="myForm" (ngSubmit)="saveData()">
    <ion-list>
      <ion-item>
        <ion-icon name="person" item-left></ion-icon>
        <ion-label stacked>Nombres:</ion-label>
        <ion-input formControlName="name" type="text" placeholder="Nombre"></ion-input>
      </ion-item>
      <ion-item>
        <ion-icon name="person" item-left></ion-icon>
        <ion-label stacked>Apellidos:</ion-label>
        <ion-input formControlName="lastName" type="text" placeholder="Apellidos"></ion-input>
      </ion-item>
      <ion-item>
        <ion-icon name="mail" item-left></ion-icon>
        <ion-label stacked>Correo electronico:</ion-label>
        <ion-input formControlName="email" type="email" placeholder="Email"></ion-input>
      </ion-item>
      <ion-item>
        <ion-icon name="calendar" item-left></ion-icon>
        <ion-label stacked>Fecha de nacimiento:</ion-label>
        <ion-datetime formControlName="dateBirth" displayFormat="MM-DD-YYYY" placeholder="MM-DD-YYY"></ion-datetime>
      </ion-item>
      <div formGroupName="passwordRetry">
        <ion-item>
          <ion-icon name="eye" item-left></ion-icon>
          <ion-label stacked>Contraseña:</ion-label>
          <ion-input formControlName="password" type="password" placeholder="Contraseña"></ion-input>
        </ion-item>
        <ion-item>
          <ion-icon name="eye" item-left></ion-icon>
          <ion-label stacked>Confirmar contraseña:</ion-label>
          <ion-input formControlName="passwordConfirmation" type="password" placeholder="Confirmar contraseña"></ion-input>
        </ion-item>
      </div>
      <ion-row radio-group formControlName="gender">
        <ion-item>
          <ion-icon name="woman" item-left></ion-icon>
          <ion-label>Mujer</ion-label>
          <ion-radio value="2"></ion-radio>
        </ion-item>
        <ion-item>
          <ion-icon name="man" item-left></ion-icon>
          <ion-label>Hombre</ion-label>
          <ion-radio value="1"></ion-radio>
        </ion-item>
      </ion-row>
    </ion-list>
    <div padding>
      <button ion-button block type="submit" [disabled]="!myForm.valid">Guardar</button>
    </div>
  </form>
</ion-content>
Ver código

Recuerda:

Si quieres ejecutar este demo un tu computadora, debes tener el entorno de ionic instalado y luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego ejecutar

npm install

Y luego

ionic cordova prepare

esto es para descargar todas las dependencias del proyecto.

¡Compártelo!