ionic + angular 验证码输入组件

Code/pincode input component for angular

https://github.com/AlexMiniApps/angular-code-input#readme

 

 

支持的平台

Angular 7, 8, 9 +
Ionic 4, 5 +
Mobile browsers and WebViews on: Android and iOS
Desktop browsers: Chrome, Firefox, Safari, Edge v.79 +
Other browsers: Edge v.41 - 44 (without code hidden feature)

step 1 安装

 npm install --save angular-code-input

step 2 module.ts导入

import { CodeInputModule } from 'angular-code-input';
 
@NgModule({
  imports: [
    // ...
    CodeInputModule
  ]
})

step 3 引入的html加入

<code-input [isCodeHidden]="false"
              [isNonDigitsCode]="false"
              [codeLength]="4"
              (codeChanged)="onCodeChanged($event)"
              (codeCompleted)="onCodeCompleted($event)">
  </code-input>

step 4 ts文件加入

onCodeChanged(code: string) {
  }
 
  // this called only if user entered full code
  onCodeCompleted(code: string) {
  }