Ng-pass-otp NPM

NgPassOtp

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

GIPHY

Installation

npm i ng-pass-otp

Usage

Add NgPassOtpModule to imports app.module.ts something like

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

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

Add component to your page:

<ng-pass-otp (onInputChange)="onOtpChange(\$event)" config="{length:5}">

#### For more functionalities, try something like this :

<ng-pass-otp class="otp-input" (onInputChange)="onOtpChange($event)" [config]="config"></ng-pass-otp>

@Component({
 selector: 'app-myapp',
 templateUrl: './myapp.html',
 styleUrls: ['./myapp.scss'],
})
export class MyAppComponent implements OnInit {

otp: number  // it can be type string if you don't set allowNumbersOnly to true

config = {
   allowNumbersOnly: true, // this is false by default
   setTypePassword: true, // this is false by default
   length: 5, // the default is 4
   inputStyles: {
     width: '70px',
     height: '70px',
     border: '2px solid white',
     'border-radius': '10px',
     'font-weight': 'bolder',
     color: 'white',
   },
 };

 constructor() { }

 ngOnInit() { }

 onOtpChange(otp) { this.otp = otp }

 ...
}

API

Name	Type	Required	Default	Description
Config	object	true	{length:4}	various configuration options to customize the component
onOtpChange	function	true	--	Function that will receive the otp
inputClass	string	false	--	Class applied to each input
ContainerClass	string	false	--	Class applied to container element
containerStyles	object	false	--	Style applied to container element
setTypePassword	bool	false	--	set true to set input type to password
allowKeyCodes	string[]	false	--	By default numbers alphabets and _ - are allowed
allowNumbersOnly	bool	false	--	set true to allow only numbers as input
*otpForm*	*string*	*false*	--	*Used to controll the input fields*

otpForm Example

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

export class myComponent implements OnInit {
  otpForm: FormGroup;

  if(otpError) {
    this.otpForm = new FormGroup({});
    for (let index = 0; index < this.config.length; index++) {
      this.otpForm.addControl(
        this.getControlName(index),
        new FormControl()
      );
    }
  }
}

This clears all the input fields

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 | | inputClass | string | false | -- | Class applied to each input | | ContainerClass | string | false | -- | Class applied to container element | | containerStyles | object | false | -- | Style applied to container element | | setTypePassword | bool | false | -- | set true to set input type to password | | allowKeyCodes | string[] | false | -- | By default numbers alphabets and _ - are allowed | | allowNumbersOnly | bool | false | -- | set true to allow only numbers as input |