length define el número de casillas y type permite caracteres numéricos o alfanuméricos. El modelo sigue siendo un único string. El pegado distribuye los caracteres entre casillas. completed comunica una entrada completa; la comprobación con el servidor corresponde a tu aplicación.
Interactúa con el ejemplo y abre Código para ver su implementación completa.
Ejemplos
Pega 123456 en la primera casilla. Retroceso vuelve a la anterior; las flechas se mueven entre casillas. completed comunica un código completo, pero no lo verifica.
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.
Los datos estructurados, callbacks y templates se muestran en los ejemplos y en la API.
El código añade las opciones avanzadas cuando difieren del valor predeterminado. Los datos y valores de esta configuración aparecen en el estado del template.
Template generado: refleja las opciones anteriores. La pestaña Código incluye los imports y el estado.
template.html
<neu-input-otp
[(value)]="text"
[length]="6"
type="numeric"
[ariaLabel]="'Código de verificación'"
/>
Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.
configured-state.ts
import { signal } from '@angular/core';
export const text = signal("");
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.
Enlaza FormField una sola vez al componente; el campo controla el valor y la validación. El esquema exige seis caracteres; completed es un evento, no un validador. Sal del control para marcarlo como visitado y restablece el campo para limpiar el valor y el estado de interacción.
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.
Define ariaLabel para nombrar el código de verificación completo. Cada casilla anuncia su posición; el idioma de la aplicación determina ese texto. El pegado rellena las casillas siguientes, ArrowLeft/ArrowRight mueve el foco y Home/End va a un extremo. Muestra el resultado de la verificación por separado del evento completed.
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
ariaLabel
string
'One-time code'
[ariaLabel]
Nombre accesible cuando no hay una etiqueta visible.
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.
errors
readonly ValidationError.WithOptionalFieldTree[]
[]
[errors]
Errores de validación proporcionados por el formulario o la aplicación.
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.
length
number
6
[length]
Número de casillas para el código OTP.
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.
pending
boolean
false
[pending]
Estado del formulario que indica que hay una validación asíncrona pendiente.
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.
type
"numeric" | "alphanumeric"
'numeric'
[type]
numeric permite dígitos; alphanumeric permite también letras.
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
completed
string
(completed)="onCompleted($event)"
Emite el código normalizado al completar todas las casillas; no lo autentica.
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.
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-focus-ring-alpha
Opacidad del anillo de foco semántico
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
25%
--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-border-color
Valor del tema heredado que utiliza este componente
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
var(--neu-border)
--neu-otp-cell-bg
Valor del tema heredado que utiliza este componente
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
var(--neu-surface-1)
--neu-otp-cell-border
Valor del tema heredado que utiliza este componente
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
var(--neu-border)
--neu-otp-cell-radius
Radio de esquina
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
var(--neu-radius)
--neu-otp-cell-size
Valor del tema heredado que utiliza este componente
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
