# NgPassOtp

A fully customizable, one-time password input component for the web built with Angular.

<!-- _This is similar to ng-otp-input, but gives you the ability to hide your input_ -->

![GIPHY](https://media.giphy.com/media/WoFMPcSy4PLgfhJDze/giphy.gif)

# Installation

```
npm i ng-pass-otp
```

# Usage

Add NgPassOtpModule to imports `app.module.ts` something like

    import { BrowserModule } from  '@angular/platform-browser';
    import { NgModule } from  '@angular/core';
    import { AppComponent } from  './app.component';
    import { NgPassOtpModule } from  'ng-pass-otp';

        @NgModule({
        declarations: [AppComponent],
        imports: [ BrowserModule,
        NgPassOtpModule],
        bootstrap: [AppComponent]
        })

Add component to your page:

<ng-pass-otp (onInputChange)="onOtpChange(\$event)" [config]="{length:5}"></ng-otp-input>

> ####<p> For more functionalities, try something like this :</p>

> `<ng-pass-otp class="otp-input" (onInputChange)="onOtpChange($event)" [config]="config"></ng-pass-otp>`

> ```
> @Component({
>  selector: 'app-myapp',
>  templateUrl: './myapp.html',
>  styleUrls: ['./myapp.scss'],
> })
> export class MyAppComponent implements OnInit {
>
> otp: number  // it can be type string if you don't set allowNumbersOnly to true
>
> config = {
>    allowNumbersOnly: true, // this is false by default
>    setTypePassword: true, // this is false by default
>    length: 5, // the default is 4
>    inputStyles: {
>      width: '70px',
>      height: '70px',
>      border: '2px solid white',
>      'border-radius': '10px',
>      'font-weight': 'bolder',
>      color: 'white',
>    },
>  };
>
>  constructor() { }
>
>  ngOnInit() { }
>
>  onOtpChange(otp) { this.otp = otp }
>
>  ...
> }
> ```

# API

| Name             | Type         | Required    | Default    | Description                                              |
| ---------------- | ------------ | ----------- | ---------- | -------------------------------------------------------- |
| Config           | object       | true        | {length:4} | various configuration options to customize the component |
| onOtpChange      | function     | true        | --         | Function that will receive the otp                       |
| inputClass       | string       | false       | --         | Class applied to each input                              |
| ContainerClass   | string       | false       | --         | Class applied to container element                       |
| containerStyles  | object       | false       | --         | Style applied to container element                       |
| setTypePassword  | bool         | false       | --         | set true to set input type to password                   |
| allowKeyCodes    | string[]     | false       | --         | By default numbers alphabets and \_ - are allowed        |
| allowNumbersOnly | bool         | false       | --         | set true to allow only numbers as input                  |
| **_otpForm_**    | **_string_** | **_false_** | **_--_**   | **_Used to controll the input fields_**                  |

**otpForm Example**

```
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

export class myComponent implements OnInit {
  otpForm: FormGroup;

  if(otpError) {
    this.otpForm = new FormGroup({});
    for (let index = 0; index < this.config.length; index++) {
      this.otpForm.addControl(
        this.getControlName(index),
        new FormControl()
      );
    }
  }
}
```

> <br>
>
> ### This clears all the input fields
>
> <br>

**Config options**
| Name | Type | Required | Default | Description |
| ---------------- | -------- | -------- | ------- | ------------------------------------------------- |
| length | number | true | 4 | Number of OTP inputs to be rendered. |
| inputStyles | object | false | -- | Style applied to each input |
| inputClass | string | false | -- | Class applied to each input |
| ContainerClass | string | false | -- | Class applied to container element |
| containerStyles | object | false | -- | Style applied to container element |
| setTypePassword | bool | false | -- | set true to set input type to password |
| allowKeyCodes | string[] | false | -- | By default numbers alphabets and \_ - are allowed |
| allowNumbersOnly | bool | false | -- | set true to allow only numbers as input |

## License

MIT

With ❤️! from theHinneh.