One-time-password input

Configuration

A multi-field input component that captures user input one character at a time. To configure the OTP-input component in your project, simply import OtpInputModule or OtpInputComponent.

example.component.ts

import { OtpInputModule } from "@ogs-gmbh/ngx-m3-components"; 

@NgModule({
  imports: [
    OtpInputModule 
  ]
})
export class ExampleComponent {}

Usage

In this example, we use KeyboardKeyArrays from ngx-utils together with the OTP-input component.

example.component.ts

import { OtpInputModule } from "@ogs-gmbh/ngx-m3-components";
import { KeyboardKeyArrays } from "@ogs-gmbh/ngx-utils"; 

@NgModule({
  imports: [
    OtpInputModule
  ],
  template: `
    <ogs-m3-otp-input
      autoFocus
      [length]="password.length"
      [accepts]="acceptedKeys.LETTERS && acceptedKeys.DIGITS"
    />
  `
})
export class ExampleComponent {
  acceptedKeys = KeyboardKeyArrays.DIGITS; 
}