https://timofei-iatsenko.github.io/angular-cc-library/
Or run locally:
- Clone repo
- run
yarn install - run
yarn run:demo - visit
http://localhost:4200
npm install angular-cc-library --save| 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 |
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:
import { Component } from '@angular/core';
import { CreditCardFormatDirective } from 'angular-cc-library';
@Component({
selector: 'credit-card-number-input',
standalone: true,
deps: [CreditCardFormatDirective],
template: `<input id="cc-number" type="tel" autocomplete="cc-number" ccNumber>`
})
export class CreditCardNumberInputComponent {}But you can still import them all at once using CreditCardDirectivesModule:
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
ccNumberdirective:
<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 incredit-card.tsfor 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
ccExpdirective:
<input id="cc-exp-date" type="tel" autocomplete="cc-exp" ccExp>CVC Formater
- add
ccCvcdirective:
<input id="cc-cvc" type="tel" autocomplete="off" ccCVC>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);
}
}Based on Stripe's jquery.payment plugin but adapted for use by Angular
MIT
