ngx-pass-code
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

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+.

Ngx_pass_code

weekly downloads from npm npm version

Build Status Coverage Status Maintenance code style: prettier FOSSA Status

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

Install

npm i ngx-pass-code

DownloadsWeekly Downloads

0

Version

1.1.0

License

MIT

Unpacked Size

140 kB

Total Files

19

Last publish

Collaborators

  • dklicek