xiaohuidong99/ionic2-pincode-input

一个ionic2的PIN码输入组件

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
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
hideForgotPassword	Boolean	false	is hide forgot password button
enableBackdropDismiss	Boolean	true	Whether the alert should be dismissed by tapping the backdrop.