ionic2-pincode-input

A pin-code input for ionic2

中文文档

install

npm install ionic2-pincode-input --save

use

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
...

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

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    PincodeInputModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
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
      }

    })

  }

}

create(PincodeOpt)

PincodeOpt

Name	Type	Default	Description
cssClass	string	''	separated by spaces
passSize	number	6	your password size
title	String	'password'	title
cancelButtonText	String	'cancel'	cancel button text
encoded	Function	(c) => {return c}	your encoded pin code function
forgotPasswordText	String	'forgot password'	forgot password text
hideToolbar	Boolean	false	is hide toolbar
hideForgotPassword	Boolean	false	is hide forgot password button
hideCancelButton	Boolean	false	is hide cancel button
enableBackdropDismiss	Boolean	true	Whether the alert should be dismissed by tapping the backdrop.