Inicio » Como » Personalización de ion-input

Personalización de ion-input

Personalización de ion-input, ion-password-toggle e ion-textarea en Ionic con TypeScript

La personalización de ion-input, ion-password-toggle y ion-textarea en Ionic y TypeScript es clave para mejorar la experiencia del usuario en formularios. En este tutorial, aprenderás a modificar estos componentes para ajustarlos a tus necesidades, desde validaciones y diseño con CSS hasta el manejo de eventos del teclado. Sigue esta guía paso a paso para dominar estas herramientas y optimizar tus formularios en Ionic.

1: Configuración del Proyecto

Instalación de Ionic

Si aún no tienes Ionic instalado en tu entorno, primero debes instalar el CLI de Ionic:

npm install -g @ionic/cli

Creación de un nuevo proyecto Ionic

Crea un nuevo proyecto con la plantilla en blanco (blank):

ionic start myAdvancedFormApp blank
cd myAdvancedFormApp
ionic serve

2: Introducción a `ion-input`

ion-input es un componente de entrada de datos altamente flexible. Puedes configurarlo para aceptar diferentes tipos de entradas como texto, correos electrónicos, contraseñas, números, fechas, etc.

Estructura básica de `ion-input`:

<ion-item>
  <ion-label position="floating">Nombre</ion-label>
  <ion-input type="text" placeholder="Ingresa tu nombre"></ion-input>
</ion-item>

Explicación:

ion-label: Es la etiqueta descriptiva que acompaña al campo de entrada.
ion-input: El campo de entrada donde los usuarios pueden escribir.

Este es el punto de partida, pero a lo largo del tutorial veremos cómo aplicar distintas personalizaciones y validaciones a este componente.

3: Campos de Texto Personalizados (Nombre)

Ahora, vamos a personalizar el campo de texto para capturar el nombre del usuario. Añadiremos estilos personalizados y validación básica para asegurarnos de que el campo no esté vacío.

HTML:

<ion-item>
  <ion-label position="floating">Nombre Completo</ion-label>
  <ion-input type="text" placeholder="Escribe tu nombre completo" [(ngModel)]="nombre"></ion-input>
</ion-item>
<ion-text color="danger" *ngIf="!nombreValido && nombre.length > 0">
  El nombre es obligatorio.
</ion-text>

adsterra-Banner 728×90

TS: Lógica de Validación (en `home.page.ts`):

export class HomePage {
  nombre: string = '';
  nombreValido: boolean = true;

  ngDoCheck() {
    this.nombreValido = this.nombre.length > 0;
  }
}

adsterra-Banner 728×90

CSS Personalizado:

ion-input {
  --background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  --color: white;
  --placeholder-color: rgba(255, 255, 255, 0.7);
  --padding-start: 15px;
  --border-radius: 10px;
}

adsterra-Banner 728×90

Explicación del CSS:

--background: Añadimos un degradado suave de rosa claro a coral.
--color: El texto dentro del input será blanco.

4: Campo de Correo Electrónico

El correo electrónico es un campo importante en cualquier formulario. Con ion-input, podemos establecer el tipo email para asegurarnos de que el formato del texto ingresado sea correcto.

HTML:

<ion-item>
  <ion-label position="floating">Correo Electrónico</ion-label>
  <ion-input type="email" placeholder="Ingresa tu correo" [(ngModel)]="email"></ion-input>
</ion-item>
<ion-text color="danger" *ngIf="!emailValido && email.length > 0">
  Ingresa un correo válido.
</ion-text>

adsterra-Banner 728×90

TS: Validación de Correo Electrónico:

export class HomePage {
  email: string = '';
  emailValido: boolean = true;

  ngDoCheck() {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    this.emailValido = emailRegex.test(this.email);
  }
}

adsterra-Banner 728×90

Explicación:

Usamos una expresión regular (regex) para validar si el correo tiene el formato adecuado.

adsterra-Banner 728×90

5: Entrada de Números con Validación

Para capturar datos numéricos como edad o cantidad, podemos usar el tipo number en ion-input.

HTML:

<ion-item>
  <ion-label position="floating">Edad</ion-label>
  <ion-input type="number" placeholder="Ingresa tu edad" [(ngModel)]="edad"></ion-input>
</ion-item>
<ion-text color="danger" *ngIf="edad <= 0 && edad !== null">
  La edad debe ser un número positivo.
</ion-text>

TS: Validación de Edad:

export class HomePage {
  edad: number | null = null;

  ngDoCheck() {
    if (this.edad !== null && this.edad <= 0) {
      this.edad = null; // Restablece la entrada si el número es inválido
    }
  }
}

adsterra-Banner 728×90

CSS Personalizado:

ion-input[type="number"] {
  --background: linear-gradient(135deg, #84fab0, #8fd3f4);
  --color: white;
  --placeholder-color: rgba(255, 255, 255, 0.7);
}

Explicación:

type="number": Especifica que solo se aceptan números.
Validación: El valor debe ser mayor que 0 para ser válido.

adsterra-Banner 728×90

6: Entradas de Teléfono

El campo de teléfono puede requerir diferentes formatos. Aquí te mostramos cómo personalizar un campo de entrada de teléfono.

HTML:

<ion-item>
  <ion-label position="floating">Teléfono</ion-label>
  <ion-input type="tel" placeholder="Ingresa tu número de teléfono" [(ngModel)]="telefono"></ion-input>
</ion-item>
<ion-text color="danger" *ngIf="!telefonoValido && telefono.length > 0">
  Ingresa un número de teléfono válido.
</ion-text>

adsterra-Banner 728×90

TS: Validación de Número de Teléfono:

export class HomePage {
  telefono: string = '';
  telefonoValido: boolean = true;

  ngDoCheck() {
    const telefonoRegex = /^[0-9]{10}$/;
    this.telefonoValido = telefonoRegex.test(this.telefono);
  }
}

CSS Personalizado:

ion-input[type="tel"] {
  --background: linear-gradient(135deg, #f093fb, #f5576c);
  --color: white;
}

7: Entradas de Fecha y Hora

Los campos de fecha y hora permiten que el usuario seleccione una fecha u hora en un formato amigable.

HTML:

<ion-item>
  <ion-label>Fecha de Nacimiento</ion-label>
  <ion-datetime display-format="DD/MM/YYYY" placeholder="Selecciona una fecha" [(ngModel)]="fechaNacimiento"></ion-datetime>
</ion-item>

adsterra-Banner 728×90

CSS Personalizado:

ion-datetime {
  --background: linear-gradient(135deg, #a18cd1, #fbc2eb);
  --color: white;
}

Explicación:

display-format: Define el formato en el que se muestra la fecha seleccionada.

adsterra-Banner 728×90

8: `ion-password-toggle`: Contraseña Básica

El campo de contraseña permite ocultar o mostrar el texto ingresado, usando el componente ion-password-toggle.

HTML:

<ion-item>
  <ion-label position="floating">Contraseña</ion-label

>
  <ion-input #passwordInput type="password" placeholder="Ingresa tu contraseña" [(ngModel)]="password"></ion-input>
  <ion-password-toggle slot="end" [input]="passwordInput"></ion-password-toggle>
</ion-item>

adsterra-Banner 728×90

9: `ion-password-toggle`: Validación Compleja de Contraseña

Vamos a agregar validaciones para asegurarnos de que la contraseña cumpla con ciertos criterios de seguridad, como longitud mínima y el uso de caracteres especiales.

HTML:

<ion-item>
  <ion-label position="floating">Contraseña</ion-label>
  <ion-input #passwordInput type="password" placeholder="Ingresa tu contraseña" [(ngModel)]="password"></ion-input>
  <ion-password-toggle slot="end" [input]="passwordInput"></ion-password-toggle>
</ion-item>
<ion-text color="danger" *ngIf="!passwordSegura && password.length > 0">
  La contraseña debe tener al menos 8 caracteres, incluir un número y un carácter especial.
</ion-text>

adsterra-Banner 728×90

TS: Validación Compleja de Contraseña:

export class HomePage {
  password: string = '';
  passwordSegura: boolean = true;

  ngDoCheck() {
    const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
    this.passwordSegura = passwordRegex.test(this.password);
  }
}

Explicación:

passwordRegex: La expresión regular asegura que la contraseña tenga al menos 8 caracteres, un número y un carácter especial.

adsterra-Banner 728×90

10: Validación de Contraseñas (Coincidencia de Contraseñas)

En algunos formularios, es necesario que el usuario ingrese la contraseña dos veces para confirmar que coinciden. Vamos a implementar esta funcionalidad.

HTML:

<ion-item>
  <ion-label position="floating">Confirmar Contraseña</ion-label>
  <ion-input type="password" placeholder="Confirma tu contraseña" [(ngModel)]="confirmPassword"></ion-input>
</ion-item>
<ion-text color="danger" *ngIf="password !== confirmPassword && confirmPassword.length > 0">
  Las contraseñas no coinciden.
</ion-text>

TS: Confirmación de Contraseña:

export class HomePage {
  confirmPassword: string = '';
}

11: Uso de `ion-textarea` con Comentarios Largos

ion-textarea es útil para entradas de texto largo como comentarios o descripciones. Vamos a crear un área para que los usuarios puedan escribir comentarios.

HTML:

<ion-item>
  <ion-label position="floating">Comentarios</ion-label>
  <ion-textarea placeholder="Escribe tus comentarios aquí" [(ngModel)]="comentarios"></ion-textarea>
</ion-item>

CSS Personalizado:

ion-textarea {
  --background: linear-gradient(135deg, #f093fb, #f5576c);
  --color: white;
  --placeholder-color: rgba(255, 255, 255, 0.7);
  --padding: 15px;
  --border-radius: 10px;
  height: 150px;
}

Explicación:

height: 150px: Aumentamos la altura del área de texto para hacerlo más adecuado para comentarios largos.

12: Personalización de Estilos: CSS Avanzado con Degradados

A lo largo de este tutorial, hemos aplicado degradados a varios componentes. Aquí tienes algunos ejemplos adicionales:

CSS para `ion-input` con Estilos Únicos:

ion-input.custom-name-input {
  --background: linear-gradient(135deg, #ff9966, #ff5e62);
  --color: #fff;
  --placeholder-color: rgba(255, 255, 255, 0.6);
  --padding: 10px;
  --border-radius: 10px;
  --font-size: 1.2rem;
}

CSS para `ion-textarea` con Degradado Suave:

ion-textarea.custom-textarea {
  --background: linear-gradient(135deg, #667eea, #764ba2);
  --color: #fff;
  --placeholder-color: rgba(255, 255, 255, 0.7);
  --padding: 20px;
  --border-radius: 15px;
  --font-size: 1.1rem;
}

13: Añadir Íconos a los `ion-input`

Puedes añadir íconos a los ion-input para mejorar la experiencia de usuario. Vamos a ver un ejemplo donde añadimos un ícono de usuario en un campo de texto.

HTML:

<ion-item>
  <ion-icon name="person-circle-outline" slot="start"></ion-icon>
  <ion-input type="text" placeholder="Ingresa tu nombre" [(ngModel)]="nombre"></ion-input>
</ion-item>

CSS Personalizado:

ion-item {
  --padding-start: 20px;
}
ion-icon {
  color: #ff6f61;
}

14: Manejo de Eventos de Teclado en `ion-input`

Puedes capturar eventos del teclado para realizar acciones específicas cuando el usuario presiona una tecla.

HTML:

<ion-item>
  <ion-label position="floating">Nombre</ion-label>
  <ion-input type="text" placeholder="Ingresa tu nombre" (ionInput)="onNameInput($event)" [(ngModel)]="nombre"></ion-input>
</ion-item>

TS: Captura de Evento:

onNameInput(event: any) {
  console.log('Nombre ingresado:', event.target.value);
}

15: Validaciones y Mensajes de Error Personalizados

Puedes personalizar completamente los mensajes de error para mejorar la claridad en tu formulario. Vamos a mostrar ejemplos.

HTML con Mensajes de Error Personalizados:

<ion-item>
  <ion-label position="floating">Nombre</ion-label>
  <ion-input type="text" placeholder="Ingresa tu nombre" [(ngModel)]="nombre"></ion-input>
</ion-item>
<ion-text color="danger" *ngIf="!nombreValido && nombre.length > 0">
  <p>El nombre es requerido y no debe estar vacío.</p>
</ion-text>

CSS para Mensajes de Error:

ion-text {
  --font-size: 0.9rem;
  --color: #e63946;
}

16: Código Completo

home.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Formulario Avanzado
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form>
    <!-- Nombre -->
    <ion-item>
      <ion-icon name="person-circle-outline" slot="start"></ion-icon>
      <ion-label position="floating">Nombre</ion-label>
      <ion-input type="text" placeholder="Ingresa tu nombre" [(ngModel)]="nombre" class="custom-name-input"></ion-input>
    </ion-item>
    <ion-text color="danger" *ngIf="!nombreValido && nombre.length > 0">
      <p>El nombre es requerido y no debe estar vacío.</p>
    </ion-text>

    <!-- Correo Electrónico -->
    <ion-item>
      <ion-label position="floating">Correo Electrónico</ion-label>
      <ion-input type="email" placeholder="Ingresa tu correo" [(ngModel)]="email"></ion-input>
    </ion-item>
    <ion-text color="danger" *ngIf="!emailValido && email.length > 0">
      <p>Ingresa un correo válido.</p>
    </ion-text>

    <!-- Edad -->
    <ion-item>
      <ion-label position="floating">Edad</ion-label>
      <ion-input type="number" placeholder="Ingresa tu edad" [(ngModel)]="edad"></ion-input>
    </ion-item>
    <ion-text color="danger" *ngIf="edad <= 0 && edad !== null">
      <p>La edad debe ser un número positivo.</p>
    </ion-text>

    <!-- Contraseña -->
    <ion-item>
      <ion-label position="floating">Contraseña</ion-label>
      <ion-input #passwordInput type="password" placeholder="Ingresa tu contraseña" [(ngModel)]="password"></ion-input>
      <ion-password-toggle slot="end" [input]="passwordInput"></ion-password-toggle>
    </ion-item>
    <ion-text color="danger" *ngIf="!passwordSegura && password.length > 0">
      <p>La contraseña debe tener al menos 8 caracteres, incluir un número y un carácter especial.</p>
    </ion-text>

    <!-- Confirmar Contraseña -->
    <ion-item>
      <ion-label position="floating">Confirmar Contraseña</ion-label>
      <ion-input type="password" placeholder="Confirma tu contraseña"

 [(ngModel)]="confirmPassword"></ion-input>
    </ion-item>
    <ion-text color="danger" *ngIf="password !== confirmPassword && confirmPassword.length > 0">
      <p>Las contraseñas no coinciden.</p>
    </ion-text>

    <!-- Comentarios -->
    <ion-item>
      <ion-label position="floating">Comentarios</ion-label>
      <ion-textarea placeholder="Escribe tus comentarios aquí" [(ngModel)]="comentarios" class="custom-textarea"></ion-textarea>
    </ion-item>
  </form>
</ion-content>

home.page.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  nombre: string = '';
  nombreValido: boolean = true;

  email: string = '';
  emailValido: boolean = true;

  edad: number | null = null;

  password: string = '';
  passwordSegura: boolean = true;

  confirmPassword: string = '';

  comentarios: string = '';

  ngDoCheck() {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    this.emailValido = emailRegex.test(this.email);

    const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
    this.passwordSegura = passwordRegex.test(this.password);

    this.nombreValido = this.nombre.length > 0;
  }
}

home.page.scss:

.custom-name-input {
  --background: linear-gradient(135deg, #ff9966, #ff5e62);
  --color: #fff;
  --placeholder-color: rgba(255, 255, 255, 0.6);
  --padding: 10px;
  --border-radius: 10px;
  --font-size: 1.2rem;
}

.custom-textarea {
  --background: linear-gradient(135deg, #667eea, #764ba2);
  --color: #fff;
  --placeholder-color: rgba(255, 255, 255, 0.7);
  --padding: 20px;
  --border-radius: 15px;
  --font-size: 1.1rem;
  height: 150px;
}

Conclusión

La personalización de ion-input, ion-password-toggle y ion-textarea en Ionic es una habilidad esencial para cualquier desarrollador que quiera mejorar la interacción con los usuarios. Con las técnicas presentadas en este tutorial, puedes adaptar estos componentes a las necesidades específicas de tu aplicación, asegurando una experiencia fluida y atractiva. Al implementar validaciones, estilos personalizados y eventos de teclado, optimizarás tus formularios y harás que sean más intuitivos y eficientes. ¡Explora estas opciones y lleva tu desarrollo en Ionic al siguiente nivel!

También puedes ver más Aquí

Nuevos artículos

PHP: Go guía para dominar programación concurrente

8 de julio de 2025

Descubre cómo la unión entre PHP y Go está transformando el desarrollo web. Una combinación que ya adoptaron plataformas como paginaweb.app para alcanzar velocidad, eficiencia y escalabilidad sin comprometer la experiencia del usuario. ¿Te imaginas lo que puede lograr tu proyecto con esta dupla?

PHP desarrollo web con PaginaWeb.app

7 de julio de 2025

PHP desarrollo web es más que un lenguaje: es la herramienta que impulsa millones de sitios en todo el mundo. En PaginaWeb.app, no solo lo implementamos, lo optimizamos para que tu página funcione con velocidad, seguridad y escalabilidad. Pero ¿por qué sigue siendo tan relevante

Ruby Sintaxis: tu nueva aliada para el desarrollo web ágil

5 de julio de 2025

La sintaxis de Ruby es más que elegante: es poderosa, flexible y perfecta para desarrollar con rapidez. Pero, ¿Qué la hace tan especial? ¿Y cómo puedes aprovecharla desde hoy mismo con Rails y herramientas como paginaweb.app? Si alguna vez pensaste que programar debía ser más

C y C++ diferencias: ¿Cuál deberías usar en tu próximo proyecto?

5 de julio de 2025

C y C++ diferencias es una búsqueda recurrente entre desarrolladores que buscan elegir con precisión. Aunque ambos lenguajes comparten una base común, sus aplicaciones, sintaxis y filosofías de diseño presentan contrastes que pueden definir el éxito de un proyecto.
¿Cuál rinde mejor? ¿Cuál es

Java características esenciales para el desarrollo web profesional

5 de julio de 2025

Aunque existen muchos lenguajes para desarrollo web, Java sigue siendo el favorito de quienes buscan resultados profesionales y sostenibles. Su combinación de robustez, herramientas modernas y compatibilidad total lo convierte en una pieza clave en el desarrollo empresarial. Lo que sigue va a cambiar tu

JavaScript fundamentos para desarrollo web moderno

30 de junio de 2025

¿Estás comenzando en programación y escuchas hablar de JavaScript por todos lados? Este lenguaje no solo es clave para crear sitios web interactivos, sino que también es la puerta de entrada al mundo del desarrollo moderno. En esta guía clara y sin vueltas, te llevamos

Personalización de ion-input

Personalización de ion-input, ion-password-toggle e ion-textarea en Ionic con TypeScript

1: Configuración del Proyecto

Instalación de Ionic

Creación de un nuevo proyecto Ionic

2: Introducción a ion-input

Estructura básica de ion-input:

Explicación:

3: Campos de Texto Personalizados (Nombre)

HTML:

TS: Lógica de Validación (en home.page.ts):

CSS Personalizado:

Explicación del CSS:

4: Campo de Correo Electrónico

HTML:

TS: Validación de Correo Electrónico:

Explicación:

5: Entrada de Números con Validación

HTML:

TS: Validación de Edad:

CSS Personalizado:

Explicación:

6: Entradas de Teléfono

HTML:

TS: Validación de Número de Teléfono:

CSS Personalizado:

7: Entradas de Fecha y Hora

HTML:

CSS Personalizado:

Explicación:

8: ion-password-toggle: Contraseña Básica

HTML:

9: ion-password-toggle: Validación Compleja de Contraseña

HTML:

TS: Validación Compleja de Contraseña:

Explicación:

10: Validación de Contraseñas (Coincidencia de Contraseñas)

HTML:

TS: Confirmación de Contraseña:

11: Uso de ion-textarea con Comentarios Largos

HTML:

CSS Personalizado:

Explicación:

12: Personalización de Estilos: CSS Avanzado con Degradados

CSS para ion-input con Estilos Únicos:

CSS para ion-textarea con Degradado Suave:

13: Añadir Íconos a los ion-input

HTML:

CSS Personalizado:

14: Manejo de Eventos de Teclado en ion-input

HTML:

TS: Captura de Evento:

15: Validaciones y Mensajes de Error Personalizados

HTML con Mensajes de Error Personalizados:

CSS para Mensajes de Error:

16: Código Completo

home.page.html:

home.page.ts:

home.page.scss:

Conclusión

2: Introducción a `ion-input`

Estructura básica de `ion-input`:

TS: Lógica de Validación (en `home.page.ts`):

8: `ion-password-toggle`: Contraseña Básica

9: `ion-password-toggle`: Validación Compleja de Contraseña

11: Uso de `ion-textarea` con Comentarios Largos

CSS para `ion-input` con Estilos Únicos:

CSS para `ion-textarea` con Degradado Suave:

13: Añadir Íconos a los `ion-input`

14: Manejo de Eventos de Teclado en `ion-input`