ionic + angular 验证码输入组件

小灰灰 2023-02-19 14:25 122阅读 0赞

# Code/pincode input component for angular #

[https://github.com/AlexMiniApps/angular-code-input\#readme][https_github.com_AlexMiniApps_angular-code-input_readme]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70][]

支持的平台

**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) {
      }

[https_github.com_AlexMiniApps_angular-code-input_readme]: https://github.com/AlexMiniApps/angular-code-input#readme
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200621025806631.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

相关 ionic5+capacitor+angular

ionic 更新到5之后。创建项目会默认使用capacitor 容器。是ionic自己开发的一套类似cordova的东西。使用起来也比较简单。慢慢的会替代cordova，变成自

比眉伴天荒/ 2023年07月18日 06:58/ 0 赞/ 31 阅读

相关图形验证码组件

hutool的验证码已经够用，但有些地方需要自定义（画布超界、去除一些字符），所以对此进行了扩展。依赖 <dependency> <groupId>

柔光的暖阳◎/ 2023年06月25日 01:59/ 0 赞/ 31 阅读

相关 Angular6二维码组件

需求： Angular6框架下可以根据内容生成对应的二维码。方案：这个我们直接使用 angular2-qrcode插件就可以。具体使用过程：

蔚落/ 2023年02月21日 14:19/ 0 赞/ 113 阅读

相关 ionic + angular 组件ion-slide 轮播组件使用

初期使用此组间时真是头疼的很，最后发现是组件参数定义的位置时机不对造成的问题。。。。其实搞清楚angular的工作原理就好。。我们使用swiper npm i

心已赠人/ 2023年02月20日 13:33/ 0 赞/ 5 阅读

相关 ionic + angular 验证码输入组件

Code/pincode input component for angular [https://github.com/AlexMiniApps/angular-cod

小灰灰/ 2023年02月19日 14:25/ 0 赞/ 123 阅读

相关 angular 学习（ionic）

创建模块（在特定的文件夹下） ionic g page (中间后缀) eg：client.page.ts ?name/path of page:main/

男娘i/ 2022年10月01日 08:58/ 0 赞/ 159 阅读

相关 ionic,angular设置是否输入日记

注入$logProvider服务 const config=\{release:false\}; angular.module('my app', \['ionic'

你的名字/ 2022年07月12日 05:29/ 0 赞/ 134 阅读

相关输入框输入验证码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

浅浅的花香味﹌/ 2021年11月29日 15:54/ 0 赞/ 511 阅读

相关验证码组件合集

1.SliderCaptcha 用户通过拖动滑块行为来完成校验，支持PC端及移动端。可以将用户拖动行为的时间、精度，滑动轨迹等信息到服务器，然后进行后台算法验证。项目

痛定思痛。/ 2021年09月21日 07:40/ 0 赞/ 400 阅读

相关 angular ionic

在实际中开发，在开发中学习 1.track by $index 的作用用于解决数字重复问题（id重复问题）； 2.ng-model 用于数据绑定（可重复使用传） 3.n

拼搏现实的明天。/ 2021年06月24日 15:58/ 0 赞/ 436 阅读