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(V12 and above)

    npm install --save ng-otp-input

For older angular version use v1.8.1

    npm install --save [email protected]

Usage

Add NgOtpInputModule to imports app.module.ts something like

import { BrowserModule } from  '@angular/platform-browser';
import { NgModule } from  '@angular/core';
import { AppComponent } from  './app.component';
import { NgOtpInputModule } from  'ng-otp-input';

    @NgModule({
    declarations: [AppComponent],
    imports: [ BrowserModule,
    NgOtpInputModule],
    bootstrap: [AppComponent]
    })

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

Config options

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!