Validation

This library was generated with Angular CLI version 7.2.0.

##Description

This is a simple library that makes confirmation number easier to create.

After sign up, most of web-sites sends you a confirm number on phone or email. And then you need to type it or click links. Using this library you can type pin on separated inputs, that passes in new input automatically.

Usage

Module

You need to import it on AppModule

ValidationModule

HTML

    //length of pin numbers
    <Pin-Validation
        [length]="6"
        [type]="`number`"
        (codeNumber)="codeNumber($event)"
        ...>
    </Pin-Validation>

You can set input types

• number
• password

JS

    //Get the pin code
    codeNumber(code) {
        console.log(code);
    }

//Clear Inputs
this.validation.clear();

To clear inputs you need to define service on constructor

    constructor(private validation: ValidationService) {}

Style

You can style it as you want

Theme

Use themes

<Pin-Validation [theme]="val-underline" ...> </Pin-Validation>

Themes type:

• val-underline
• val-round
• val-frame
• val-classic
• val-outline

Custom style

<Pin-Validation [custom]="myStyle" ...> </Pin-Validation>

// Your own css style
myStyle = {
    width: "30px",
    height: "30px",
    border: "1px solid black",
    "background-color": "#F2F2F2",
    "border-style": "solid",
    color: "blue"
  };

In order to use custom styling you need to remove theme directive

Style using CSS

Or you can create your own style using these selectors

//Id of container
#inputsContainer { //Style }

//Class of inputs
.codeInput { //Style }

TODO

* New Designs

Support

Tested on Ionic 4 and 3

License

MIT