Web Components Mask Input Overview
La Ignite UI for Web Components es un campo de entrada que permite al desarrollador controlar la entrada del usuario y formatear el valor visible, según reglas configurables. Proporciona diferentes opciones de entrada y facilidad de uso y configuración.
Web Components Mask Input Example
Usage
Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
Antes de utilizar IgcMaskInputComponent, debe registrarlo de la siguiente manera:
import { defineComponents, IgcMaskInputComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcMaskInputComponent);
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.
Mask Rules
La siguiente tabla muestra las reglas de máscara integradas admitidas:
| Personaje de máscara | Descripción |
|---|---|
| 0 | Carácter de dígito [0-9]. Se requiere entrada. |
| 9 | Carácter de dígito [0-9]. La entrada es opcional. |
| # | Carácter de dígito [0-9], signo más (+) o menos (-). Se requiere entrada. |
| l | Carácter de letra. Se requiere entrada. |
| ? | Carácter de letra. La entrada es opcional. |
| A | Carácter alfanumérico (letra o dígito). Se requiere entrada. |
| a | Carácter alfanumérico (letra o dígito). La entrada es opcional. |
| & | Cualquier carácter del teclado. Se requiere entrada. |
| C | Cualquier carácter del teclado. La entrada es opcional. |
| \ | Escapa de una bandera de máscara y la convierte en literal. |
Estos indicadores también participan en la validación del componente, es decir, la entrada deja de ser válida si algunas, pero no todas, las posiciones requeridas están ocupadas (el valor de ninguna posición ocupada/vacía sigue siendo responsabilidad de required). Esto se aplica tanto a las entradas independientes como a las incluidas en un formulario.
Applying Mask
Aplicar la mascarilla es bastante sencillo. Todo lo que necesita hacer es proporcionar un patrón predeterminado a la propiedad mask de la entrada.
En el siguiente ejemplo, aplicaremos una máscara para un número de teléfono con un código de extensión.
<igc-mask-input id="mask-input" mask="(####) 00-00-00 Ext. 9999">
<igc-icon name="phone" slot="prefix"></igc-icon>
<span slot="helper-text">Phone number</span>
</igc-mask-input>
Después de eso deberías ver lo siguiente en tu navegador:
Prompt Character
Los desarrolladores pueden personalizar el símbolo de aviso utilizado para las partes vacías de la máscara. Para hacer esto, simplemente proporcione cualquier carácter a la propiedad prompt:
<igc-mask-input id="mask-input" mask="(####) 00-00-00 Ext. 9999" prompt="-"></igc-mask-input>
De forma predeterminada, el carácter prompt es un guión bajo.
Placeholder
Los desarrolladores también pueden aprovechar la propiedad placeholder, que cumple el propósito del atributo de marcador de posición de entrada nativo. Si no se proporciona ningún valor para el marcador de posición, el valor de la máscara se utiliza como tal.
<igc-mask-input id="mask-input" mask="00/00/0000" placeholder="dd/MM/yyyy"></igc-mask-input>
Value Modes
IgcMaskInputComponent expone una propiedad valueMode que le permite elegir entre las opciones raw y withFormatting para configurar qué valor de entrada (formateado o sin formato) vincular en su formulario cuando se aplica una máscara específica. De forma predeterminada, valueMode está configurado en raw. Pruébelo usted mismo en el siguiente ejemplo:
Styling
El componente IgcMaskInputComponent deriva del componente IgcInputComponent, por lo que expone todas las partes CSS disponibles. Consulte Estilo de entrada como referencia.
Assumptions and limitations
- La entrada enmascarada no expone un atributo de tipo ya que siempre es una entrada de tipo texto.
- Actualmente no se admite el comportamiento de deshacer/rehacer.