InputMask

Guía la escritura con posiciones para dígitos, letras y caracteres alfanuméricos.

Categoría: Formularios y selección
Import: @neural-ui/core/input-mask
Selector: neu-input-mask

import { NeuInputMaskComponent } from '@neural-ui/core/input-mask';

Uso

9 admite un dígito, A una letra y * una letra o dígito. Los demás caracteres son literales. El valor es el texto con máscara, incluidos los literales insertados. La máscara guía la edición; utiliza validadores de formulario para exigir longitud o reglas de negocio.

Ejemplos

Interactúa con el ejemplo y abre Código para ver su implementación completa.

Referencia

A admite letras, 9 admite dígitos y * admite letras o dígitos. Los demás caracteres son literales.

Valor con formato

Prueba y configura

Cambia las opciones y prueba la vista previa. Despliega el valor de la aplicación o el evento para consultar los datos reales; el template generado permanece junto al configurador.

Vista previa

Teléfono

Valor actual de la aplicación

Deshabilitado

Solo lectura

Obligatorio

Estado inválido

Opciones avanzadas · 11

Template generado: refleja las opciones anteriores. La pestaña Código incluye los imports y el estado.

<neu-input-mask
  [(value)]="text"
  mask="999 999 999"
  [label]="'Teléfono'"
/>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

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

export const text = signal("");

Inputs de datos, callbacks y configuración estructurada

Estos inputs requieren un modelo o función, no un checkbox. Modifica el campo del mismo nombre en el componente de Código y enlázalo al template; los datos que ya usa esta vista previa se muestran en el estado anterior.

errors · readonly ValidationError.WithOptionalFieldTree[]

En Código: define errors con este tipo y utiliza [errors]="errors" (o errors() si es una signal).

pattern · readonly RegExp[]

En Código: define pattern con este tipo y utiliza [pattern]="pattern" (o pattern() si es una signal).

Signal Forms

Enlaza FormField una sola vez al componente; el campo controla el valor y la validación. El esquema exige los once caracteres de la máscara telefónica completa. Sal del control para marcarlo como visitado y restablece el campo para limpiar el valor y el estado de interacción.

Guía de Signal Forms

Teléfono

Válido: false

Valor del formulario

Valor y eventos

Utiliza [(value)] o [value] junto con (valueChange), no ambas formas. El modelo sincroniza el estado de la aplicación; los demás Outputs comunican los eventos documentados. touch comunica que se ha visitado o abandonado el control, no un valor nuevo.

Accesibilidad y teclado

Utiliza una etiqueta que describa el valor y un placeholder que muestre el formato esperado. La máscara no sustituye required ni la validación de negocio. Asocia el mensaje de error mediante ariaDescribedBy; el usuario puede escribir, pegar y corregir caracteres con las teclas habituales.

Tecla	Acción
`Tab`	Entra y sale del control.
`Typing / Paste`	Rellena las posiciones compatibles con la máscara.

API

Los Inputs, modelos y Outputs proceden del contrato de Core fijado. Pulsa un tipo con nombre para abrir su definición. Este componente no tiene templates públicos.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`dirty`	`boolean`	`false`	`[dirty]`	Estado del formulario que indica que el usuario ha cambiado el valor.
`disabled`	`boolean`	`false`	`[disabled]`	Impide la interacción del usuario.
`errorMessage`	`string`	`''`	`[errorMessage]`	Mensaje de error visible asociado al campo.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Errores de validación proporcionados por el formulario o la aplicación.
`hidden`	`boolean`	`false`	`[hidden]`	Oculta el control según el estado del formulario.
`hint`	`string`	`''`	`[hint]`	Texto de ayuda asociado al campo.
`inputId`	`string`	`inject(NeuIdGenerator).getId('neu-input-mask-')`Valor derivado	`[inputId]`	Identificador estable del control nativo; se genera si se omite.
`invalid`	`boolean`	`false`	`[invalid]`	Muestra el estado inválido; no añade una regla de validación.
`label`	`string`	`''`	`[label]`	Etiqueta visible y nombre accesible del control.
`mask`	`string`	`''`	`[mask]`	Gramática: 9 dígito, A letra, * alfanumérico; los demás caracteres son literales.
`maxLength`	`number \| undefined`	`undefined`	`[maxLength]`	Longitud máxima suministrada por el formulario. Configura el validador en el esquema.
`minLength`	`number \| undefined`	`undefined`	`[minLength]`	Longitud mínima suministrada por el formulario. Configura el validador en el esquema.
`name`	`string`	`''`	`[name]`	Nombre asociado al control nativo del formulario.
`pattern`	`readonly RegExp[]`	`[]`	`[pattern]`	Restricciones de validación con expresiones regulares suministradas por el formulario.
`pending`	`boolean`	`false`	`[pending]`	Estado del formulario que indica que hay una validación asíncrona pendiente.
`placeholder`	`string`	`''`	`[placeholder]`	Texto que se muestra cuando el campo no tiene un valor seleccionado.
`readonly`	`boolean`	`false`	`[readonly]`	Mantiene el control enfocable y legible sin aceptar cambios.
`required`	`boolean`	`false`	`[required]`	Marca el campo como obligatorio; utiliza un validador del formulario para exigirlo.
`touched`	`boolean`	`false`	`[touched]`	Estado del formulario que indica que el control ha sido visitado.

Models

Un modelo admite [(propiedad)]="signal" o la pareja [propiedad] y (propiedadChange). Elige una de las dos formas, no ambas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`value`	`string`	`''`	`[(value)]`	Único string confirmado, sincronizado mediante valueChange.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Nombre	Valor emitido	Uso en el template	Descripción
`touch`	`void`	`(touch)="onTouch($event)"`	Notifica al formulario que el control ha sido visitado; no es un cambio de valor.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Este componente no expone proyección de contenido ni templates públicos de personalización.

Estilos y tokens

Carga los estilos de Core una sola vez. Utiliza los tokens públicos para personalizaciones locales o un preset para cambios de toda la aplicación. Conserva la legibilidad de etiquetas, foco, opciones seleccionadas y estados deshabilitados en modo claro y oscuro.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-border`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-focus-ring`	Anillo normal del foco de teclado	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-radius`	Radio de las esquinas del control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`8px`
`--neu-surface`	Superficie principal del campo, cabecera o control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-text`	Color del texto principal y de los iconos que lo heredan	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#0f172a`
`--neu-text-muted`	Etiquetas secundarias y contenido de ayuda	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#475569`
`--neu-transition`	Duración de los cambios de estado	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`200ms ease`