Needless UI

Componenti

Campo OTP

Codici di verifica in caselle separate, su un unico input reale.

Import

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

NuiOtp

Disegna le caselle e avvolge l’input.

Selettore
[nuiOtp]
NomeTipoPredefinitoDescrizione
lengthInputnumber6Numero di caratteri.
patternInput'digits' | 'alphanumeric''digits'digits, oppure alphanumeric per lettere e cifre.
groupsInputnumber[][]Dimensioni dei gruppi, disegnati con un separatore tra l’uno e l’altro, come [3, 3].
maskedInputbooleanfalseDisegna puntini al posto dei caratteri.
completedOutputstringEmette il codice ogni volta che si riempie l’ultima casella.

NuiOtpInput

L’input reale. Riceve gli attributi che servono a un codice monouso.

Selettore
input[nuiOtpInput]
NomeTipoPredefinitoDescrizione
webOtpInputbooleanfalseCompila il codice da un SMS in arrivo tramite l’API WebOTP, dove supportata.