ngx-pass-code

This library was generated with Nx.

Reactive Angular custom form control component for inserting (OTP) code or password. Supports Angular version 12+.

Feature

• Individual character input box.
• Reactive form control.
• Plug & play by providing form control.
• Supports sync validation.
• No 3rd party dependencies.

Live workspace demo

Stackblitz

Install

npm install ngx-pass-code@latest

Usage

@NgModule({
  ...,
  imports: [
    ...,
    NgxPassCodeModule
  ],
})
export class FeatureModule {}

<ngx-pass-code
  formControlName="codeControl"
  [length]="5"
  type="text"
  [uppercase]="true"
></ngx-pass-code>

Input property decorators:

• length

  Set length of the code (number of inputs). Defaulted to 0.

• type

  Set input type property: 'text' | 'number' |'password'. Type 'password' is hiding inserted values. Defined type is also used for casting control value. Defaulted to 'text'.

• uppercase

  Set uppercase inputs value transformation. Defaulted to false.

• patterns

  To set pattern validation use Angular Validators.pattern when defining form control. Example: new FormControl('', {validators: Validators.pattern('[a-zA-z0-9]{1}')}). The {1} in pattern expression has to be set to 1 because individual inputs.

• autofocus - from v1.1.0

  Set focus on the first input code. Defaulted to false.

• autoblur - from v1.1.0

  Remove focus from the last input when it is filled. Defaulted to false.

Contributing

Contributions are more than welcome!

License

MIT License

Copyright (c) 2022 Dino Klicek