Install ng-otp-input
Install the ng-otp-input library via npm:
npm i ng-otp-input
Import NgOtpInputModule
Add the NgOtpInputModule to your application. Open app.module.ts and update it as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; import { NgOtpInputModule } from 'ng-otp-input'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, NgOtpInputModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
4. Add a Basic OTP Input Example
Now let’s add a simple example of creating simple otp form input field in app.component.ts and app.component.html.
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
import { Component, ViewChild } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { otp: string; showOtpComponent = true; @ViewChild('ngOtpInput', { static: false}) ngOtpInput: any; config = { allowNumbersOnly: false, length: 5, isPasswordInput: false, disableAutoFocus: false, placeholder: '', inputStyles: { 'width': '50px', 'height': '50px' } }; onOtpChange(otp) { this.otp = otp; } setVal(val) { this.ngOtpInput.setValue(val); } toggleDisable(){ if(this.ngOtpInput.otpForm){ if(this.ngOtpInput.otpForm.disabled){ this.ngOtpInput.otpForm.enable(); }else{ this.ngOtpInput.otpForm.disable(); } } } onConfigChange() { this.showOtpComponent = false; this.otp = null; setTimeout(() => { this.showOtpComponent = true; }, 0); } } |
app.component.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<div class="sidebar"> <div class="a-o-i-t"> Angular Otp Input </div> <ul class="list"> <li> <input type="checkbox" name="number-only" id="number-only" [(ngModel)]="config.allowNumbersOnly" (change)="onConfigChange()"> <span class="s-t">Allow number only</span> </li> <li> <input type="checkbox" name="pass-input" id="pass-input" [(ngModel)]="config.isPasswordInput" (change)="onConfigChange()"> <span class="s-t">Password input</span> </li> <li> <input type="checkbox" name="disable-focus" id="disable-focus" [(ngModel)]="config.disableAutoFocus" (change)="onConfigChange()"> <span class="s-t">Disable auto focus</span> </li> <li> <span class="s-t">Number of inputs</span> <input type="number" name="input-length" class="f-c" [(ngModel)]="config.length" min="1" max="10" (ngModelChange)="onConfigChange()"> </li> <li> <span class="s-t">Placeholder</span> <input type="text" name="input-placeholder" [(ngModel)]="config.placeholder" class="f-c" maxlength="1" (change)="onConfigChange()"> </li> <li> <span class="s-t">Update value to</span> <input type="text" #valInput name="input-update-val" placeholder="Focus out to change" (change)="setVal(valInput.value)" class="f-c" min="1" max="10"> </li> <li> <button class="btn" (click)="toggleDisable()">Toogle Disable</button> </li> </ul> </div> <div class="content"> <div class="o-c"> <div> <div class="card"> <p class="a-o-i">Enter verification code</p> <ng-otp-input #ngOtpInput (onInputChange)="onOtpChange($event)" *ngIf="showOtpComponent" [config]="config"></ng-otp-input> <span *ngIf="otp" class="o-t-p">Entered otp :-{{otp}}</span> </div> </div> </div> </div> |
FULL SOURCE CODE
