Non Productive Monday

    ionic2-pincode-input
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    ionic2-pincode-input

    Dependency Status NPM version Downloads MIT License

    A pin-code input for ionic2

    中文文档

    v

    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

    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.
    pinHandler PincodePinHandler (pin: string): Promise<any> null Callback called when the PIN is complete. Returns a Promise which resolves if the PIN is valid.
    visibility Boolean false is show pin-code

    Install

    npm i ionic2-pincode-input

    DownloadsWeekly Downloads

    12

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    185 kB

    Total Files

    18

    Last publish

    Collaborators

    • hsuanlee