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