Needless UI

Componentes

Campo OTP

Códigos de verificación en casillas separadas, sobre una única entrada real.

Importación

import-otp.ts
import { NuiOtp, NuiOtpInput } from '@needless-ui/angular/otp';

NuiOtp

Dibuja las casillas y envuelve la entrada.

Selector
[nuiOtp]
NombreTipoPredeterminadoDescripción
lengthInputnumber6Número de caracteres.
patternInput'digits' | 'alphanumeric''digits'digits, o alphanumeric para letras y dígitos.
groupsInputnumber[][]Tamaños de los grupos, dibujados con un separador entre ellos, como [3, 3].
maskedInputbooleanfalseDibuja puntos en lugar de los caracteres.
completedOutputstringEmite el código cada vez que se llena la última casilla.

NuiOtpInput

La entrada real. Recibe los atributos que necesita un código de un solo uso.

Selector
input[nuiOtpInput]
NombreTipoPredeterminadoDescripción
webOtpInputbooleanfalseRellena el código desde un SMS entrante mediante la API WebOTP, donde esté disponible.