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


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

``shell
npm install ngx-pass-code@latest
`

Usage

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

`html
formControlName="codeControl"
[length]="5"
type="text"
[uppercase]="true"
>
`

$3

- #### 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