在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):thekip/angular-cc-library开源软件地址(OpenSource Url):https://github.com/thekip/angular-cc-library开源编程语言(OpenSource Language):TypeScript 91.5%开源软件介绍(OpenSource Introduction):DescriptionAngular CC Library - for validation and formating of input parameters Demo
UsageInstallationnpm install angular-cc-library --save Version CompatibilityVersion If you use an older version of Angular please use version Formatting DirectiveOn the input fields, add the specific directive to format inputs.
All fields must be 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
<input id="cc-number" type="tel" autocomplete="cc-number" ccNumber>
<input type="tel" ccNumber #ccNumber="ccNumber">
<span class="scheme">{{ccNumber.resolvedScheme$ | async}}</span>
Expiration Date Formatter Will support format of MM/YY or MM/YYYY
<input id="cc-exp-date" type="tel" autocomplete="cc-exp" ccExp> CVC Formater
<input id="cc-cvc" type="tel" autocomplete="off" ccCVC> ValidationCurrent 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);
}
} InspirationBased on Stripe's jquery.payment plugin but adapted for use by Angular LicenseMIT |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论