Awesome

ionic2-pincode-input

A pin-code input for ionic2

中文文档 live demo

Installation

$ npm install ionic2-pincode-input --save
$ npm install @angular/animations --save

Usage

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

...

import { PincodeInputModule } from  'ionic2-pincode-input';

@NgModule({
  ...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    PincodeInputModule,
    IonicModule.forRoot(MyApp)
  ]
  ...
})
export class AppModule {}

your-page.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { PincodeController } from  'ionic2-pincode-input/dist/pincode'
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  code:string;

  constructor(
    public navCtrl: NavController,
    public pincodeCtrl: PincodeController,
  ) {
  }

  openPinCode():any{

    let pinCode =  this.pincodeCtrl.create({
      title:'Pincode'
    });

    pinCode.present();

    pinCode.onDidDismiss( (code,status) => {

      if(status === 'done'){

        this.code = code;
      }else if (status === 'forgot'){

        // forgot password
      }

    })

  }

}

pinHandler example

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { PincodeController } from  'ionic2-pincode-input/dist/pincode'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  code:string;
  private handlePIN: (pincode: string) => Promise<any> = (pincode: string) => {
      if (pincode === '123456') {
        // Do something
        console.log('Too easy');
        return Promise.reject('');
      } else {
        // Do something
        return Promise.resolve();
      }
    };

  constructor(
    public navCtrl: NavController,
    public pincodeCtrl: PincodeController,
  ) {

  }
  
  openPinCode():any{

    let pinCode =  this.pincodeCtrl.create({
      title:'Pincode',
      pinHandler: this.handlePIN
    });

    pinCode.present();

    pinCode.onDidDismiss( (code,status) => {

      if (status === 'forgot'){

        // forgot password
      }

    })

  }

}

create(PincodeOpt)

PincodeOpt