https://github.com/timofei-iatsenko/angular-cc-library

Library to support Credit Card input masking and validation
https://github.com/timofei-iatsenko/angular-cc-library

Last synced: 5 days ago
JSON representation

Library to support Credit Card input masking and validation

• Host: GitHub
• URL: https://github.com/timofei-iatsenko/angular-cc-library
• Owner: timofei-iatsenko
• License: mit
• Created: 2016-11-06T18:45:22.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2024-09-10T14:51:15.000Z (14 days ago)
• Last Synced: 2024-09-10T16:18:45.263Z (14 days ago)
• Language: TypeScript
• Size: 3.58 MB
• Stars: 81
• Watchers: 6
• Forks: 71
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - angular-cc-library - Library to support Credit Card input masking and validation. (Table of contents / Third Party Components)
• fucking-awesome-angular - angular-cc-library - Library to support Credit Card input masking and validation. (Table of contents / Third Party Components)
• fucking-awesome-angular - angular-cc-library - Library to support Credit Card input masking and validation. (Table of contents / Third Party Components)

README

        


Angular CC Library


Validation and formatting input parameters of Credit Cards



[![Version][badge-version]][package]

[![Downloads][badge-downloads]][package]



# Demo

https://timofei-iatsenko.github.io/angular-cc-library/

Or run locally:

1. Clone repo

2. run `yarn install`

3. run `yarn run:demo`

4. visit `http://localhost:4200`

# Usage

## Installation

```shell

npm install angular-cc-library --save

```

## Version Compatibility

| Angular | Library |

|---------|---------|

| 18.x    | 3.4.x   |

| 17.x    | 3.3.x   |

| 16.x    | 3.2.x   |

| 15.x    | 3.1.x   |

| 14.x    | 3.0.4   |

| 13.x    | 3.0.0   |

| 12.x    | 2.1.3   |

## 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.

Since `[email protected]` all directives declared as standalone, 

so you can import them directly into your component:

```typescript

import { Component } from '@angular/core';

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

@Component({

  selector: 'credit-card-number-input',

  standalone: true,

  deps: [CreditCardFormatDirective],

  template: ``

})

export class CreditCardNumberInputComponent {}

```

But you can still import them all at once using `CreditCardDirectivesModule`:

```typescript

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:

```html

```

* 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: 

```html

{{ccNumber.resolvedScheme$ | async}}

```

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

**Expiration Date Formatter**

Will support format of MM/YY or MM/YYYY

* add `ccExp` directive:

```html

```

**CVC Formater**

* add `ccCvc` directive:

```html

```

### Validation

Current only Model Validation is supported.

To implement, import the validator library and apply the specific validator on each form control

```typescript

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

@Component({

  selector: 'app',

  template: `

    

        

        

        

    

  `

})

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](https://github.com/stripe/jquery.payment) plugin but adapted for use by Angular

# License

MIT

[badge-downloads]: https://img.shields.io/npm/dw/angular-cc-library.svg

[badge-version]: https://img.shields.io/npm/v/angular-cc-library.svg

[package]: https://www.npmjs.com/package/angular-cc-library