Needless UI

Composants

Champ OTP

Des codes de vérification dans des cases séparées, sur un seul vrai champ.

Import

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

NuiOtp

Dessine les cases et englobe le champ.

Sélecteur
[nuiOtp]
NomTypePar défautDescription
lengthInputnumber6Nombre de caractères.
patternInput'digits' | 'alphanumeric''digits'digits, ou alphanumeric pour les lettres et les chiffres.
groupsInputnumber[][]Tailles des groupes, dessinés avec un séparateur entre eux, par exemple [3, 3].
maskedInputbooleanfalseAffiche des points au lieu des caractères.
completedOutputstringÉmet le code chaque fois que la dernière case est remplie.

NuiOtpInput

Le vrai champ. Il reçoit les attributs dont un code à usage unique a besoin.

Sélecteur
input[nuiOtpInput]
NomTypePar défautDescription
webOtpInputbooleanfalseRemplit le code à partir d’un SMS entrant grâce à l’API WebOTP, là où elle est prise en charge.