search

code-farmz / ng-otp-input

A fully customizable, one-time password input component for the web built with Angular.
MIT License
112 stars 55 forks source link

readme

ng-otp-input

Npm Version

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

GIPHY

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 ng-otp-input@1.8.1

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

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

Config options

Name Type Required default Description
length number true 4 Number of OTP inputs to be rendered.
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.
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.
allowNumbersOnly bool false -- set true to allow only numbers as input
isPasswordInput bool false -- set true for password type 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
placeholder string false -- input placeholder
letterCase string -- -- Set value to Upper or Lower to change the otp to upper case or lower case

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

NPM

Contributing

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