ng-otp-input

A fully customizable, one-time password input component for the web built with Angular.

Demo

Edit on Stackbliz

Installation

For angular latest angular version(V16 and above)

    npm install --save ng-otp-input

For angular version(V12 till V15)

    npm install --save ng-otp-input@1.9.3

For older angular version use v1.8.1(V11 and below)

    npm install --save ng-otp-input@1.8.1

Breaking changes in V2

• V2 require angular 16 or above
• Component will now emit null instead of empty string if no value supplied

Usage

Add NgOtpInputModule to imports module.ts something like

import { NgOtpInputModule } from  'ng-otp-input';
@NgModule({
...
imports: [ ...other modules,
NgOtpInputModule]
})

For Standlone components you can directly import NgOtpComponent

import { NgOtpInputComponent} from 'ng-otp-input';
@Component({
    ...,
    imports: [NgOtpInputComponent]
})

Add component to your page:

<ng-otp-input  (onInputChange)="onOtpChange($event)"  [config]="{length:5}"></ng-otp-input>

or 

<ng-otp-input  [formCtrl]="YourFormControl"  [config]="{length:5}"></ng-otp-input>

API

Name	Type	Required	default	Description
onOtpChange	Output	false	--	Function that will receive the otp.Not required if formCtrl is passed
onBlur	Output	false	--	Triggered on focus out of the component
setValue	function	false	--	Call setValue method of component to update component value. See example below
formCtrl	FormControl	false	--	If there value will be set to the passed form control no need to subscribe to onOtpChange
config	object	true	{length:4}	Various configuration options to customize the component

Config options

Name	Type	Required	default	Description
allowNumbersOnly	bool	false	--	set true to allow only numbers as input
disableAutoFocus	bool	false	--	First input will be auto focused on component load and to next empty input on setValue excecution.Set this flag to true to prevent this behaviour
containerClass	string	false	--	Class applied to container element.
containerStyles	object	false	--	Style applied to container element.Check https://angular.io/api/common/NgStyle for more info.
inputStyles	object	false	--	Style applied to each input.Check https://angular.io/api/common/NgStyle for more info.
inputClass	string	false	--	Class applied to each input.
isPasswordInput	bool	false	--	set true for password type input
length	number	true	4	Number of OTP inputs to be rendered.
letterCase	string	--	--	Set value to Upper or Lower to change the otp to upper case or lower case
placeholder	string	false	--	input placeholder
separator	char	false	--	Separator char that will be added between inputs
showError	bool	false	--	If set to true and `formCtrl` is supplied and `formCtrl` is invalid and touced/dirty class error-input will be added to all the inputs and border will trun red

Updating component value using setValue method

Component value can be updated using setValue method of the component example:-

1. get component reference using @ViewChild

   For version 1.7.7 and latest

   @ViewChild(NgOtpInputComponent, { static: false}) ngOtpInput:NgOtpInputComponent;
   

   For version older than 1.7.7

   <ng-otp-input #ngOtpInput ></ng-otp-input> //add hash to ng-otp-input component```
   @ViewChild('ngOtpInput') ngOtpInputRef:any;
   

2. call setValue method when you want to set the value of component like

   yourMethod(){
       this.ngOtpInputRef.setValue(yourValue);
       //yourvalue can be any string or number
   }
   

Disable inputs

Inputs can be disabled by getting the otp form instance of the component and calling disable method

1.Get the component ref in the same way as done in SetValue method above 2.Call disable method of otpForm as follow

this.ngOtpInputRef.otpForm.disable();

Focus to Specific box

1.Get the component ref in the same way as done in SetValue method above

2.Get the box id and call focusTo method as follow

    let eleId=this.ngOtpInputRef.getBoxId(0);
    this.ngOtpInputRef.focusTo(eleId);

License

Contributing

Add a star to show your support and feel free to open issues and pull requests!