• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

thekip/angular-cc-library: Library to support Credit Card input masking and vali ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

thekip/angular-cc-library

开源软件地址(OpenSource Url):

https://github.com/thekip/angular-cc-library

开源编程语言(OpenSource Language):

TypeScript 91.5%

开源软件介绍(OpenSource Introduction):

Description

Angular CC Library - for validation and formating of input parameters

Demo

  1. Clone repo
  2. run yarn install
  3. run yarn run:demo
  4. visit http://localhost:4200

Usage

Installation

npm install angular-cc-library --save

Version Compatibility

Version 3.* and above built with partial Ivy metadata and compatible with Angular >= 13 .

If you use an older version of Angular please use version 2.*

Formatting Directive

On the input fields, add the specific directive to format inputs. All fields must be type='tel' in order to support spacing and additional characters

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CreditCardDirectivesModule } from 'angular-cc-library';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, FormsModule, CreditCardDirectivesModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Credit Card Formatter

  • add ccNumber directive:
<input id="cc-number" type="tel" autocomplete="cc-number" ccNumber>
  • this will also apply a class name based off the card .visa, .amex, etc. See the array of card types in credit-card.ts for all available types

  • You can get parsed card type by using export api:

<input type="tel" ccNumber #ccNumber="ccNumber">
<span class="scheme">{{ccNumber.resolvedScheme$ | async}}</span>

resolvedScheme$ will be populated with visa, amex, etc.

Expiration Date Formatter Will support format of MM/YY or MM/YYYY

  • add ccExp directive:
<input id="cc-exp-date" type="tel" autocomplete="cc-exp" ccExp>

CVC Formater

  • add ccCvc directive:
<input id="cc-cvc" type="tel" autocomplete="off" ccCVC>

Validation

Current only Model Validation is supported. To implement, import the validator library and apply the specific validator on each form control

import { CreditCardValidators } from 'angular-cc-library';

@Component({
  selector: 'app',
  template: `
    <form #demoForm="ngForm" (ngSubmit)="onSubmit(demoForm)" novalidate>
        <input id="cc-number" formControlName="creditCard" type="tel" autocomplete="cc-number" ccNumber>
        <input id="cc-exp-date" formControlName="expirationDate" type="tel" autocomplete="cc-exp" ccExp>
        <input id="cc-cvc" formControlName="cvc" type="tel" autocomplete="off" ccCvc>
    </form>
  `
})
export class AppComponent implements OnInit {
  form: FormGroup;
  submitted: boolean = false;

  constructor(private _fb: FormBuilder) {}

  ngOnInit() {
    this.form = this._fb.group({
      creditCard: ['', [CreditCardValidators.validateCCNumber]],
      expirationDate: ['', [CreditCardValidators.validateExpDate]],
      cvc: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(4)]] 
    });
  }

  onSubmit(form) {
    this.submitted = true;
    console.log(form);
  }
}

Inspiration

Based on Stripe's jquery.payment plugin but adapted for use by Angular

License

MIT




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap