Angular CC Library - for validation and formating of input parameters
- Clone repo
- run
yarn install
- run
yarn run:demo
- visit
http://localhost:4200
npm install angular-cc-library --save
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.*
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 incredit-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>
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