A lightweight and highly customizable Angular OTP component.
npm install ng-otp-fieldsA lightweight and highly customizable Angular OTP component.
``
$ npm install --save ng-otp-fields
`js
// in app.module.ts
import { NgOtpFieldsModule } from 'ng-otp-fields';
@NgModule({
...
imports: [
NgOtpFieldsModule
],
...
})
export class AppModule { }
`
`html`
`js
// in app.component.ts
config: Config = {
length:8,
inputClass: 'input',
containerClass: 'input--key',
allowNumbersOnly: true,
isPasswordInput: true
}
onOtpChange(event) {
console.log(event);
}
`
#### ng-otp-input
This component has the following Input properties:
* [config]: Configuration object.
It has the following Output event:
* (onInputChange): Emitted when any input is changed. It returns the value of fields in a string.
#### Configuration object
`js
// configuration object
{
inputStyles?: {[key: string]: any}; // default empty
containerStyles?: {[key: string]: any}; // default empty
allowKeyCodes?: string[]; // default empty
length: number; // default 4
allowNumbersOnly?: boolean; // default false
inputClass?: string; // default empty
containerClass?: string; // default empty
isPasswordInput?: boolean; // default false
disableAutoFocus?: boolean; // default false
placeholder?: string; // default empty
}
``
MIT ©