NgOneTimePassword

Storybook Demo

Installation

To install the package simply run:

npm i @nvytychakdev/ng-one-time-password --save

Add NgOneTimePasswordModule to your app:

import { NgOneTimePasswordModule } from 'ng-one-time-password';

@NgModule({
  imports: [BrowserModule, FormsModule, NgOneTimePasswordModule],
})
export class AppModule {}

Usage

Now we can import our component into the template. As it has form control support, there are two options to do so.

Simple [(ngModel)] way:

<ng-one-time-password
  [(ngModel)]="value"
  (ngModelChange)="onValueChange($event)"
></ng-one-time-password>

Or use angular reactive form control API:

<ng-one-time-password
  formControlName="otp-control"
></ng-one-time-password>

API

Name	Type	Required	Default	Description
length	number	false	6	Defines one time password length.
type	OneTimePasswordType	false	'text'	Defines input type for the one time password.
inputClass	string	false	''	Defines custom CSS class for all inputs.
wrapperClass	string / string[]	false	''	Defines custom CSS class for inputs wrapper.
masked	boolean	false	false	Defines masked state of the password. Once true all inputs will be replaced with starts.
disabled	boolean	false	false	Defines disabled state of the inputs for OTP. Can be provided with form control API.
focusOnInit	boolean	false	false	Defines if OTP control should be focused on component init.