import { Component , OnInit } from '@angular/core' ; import { Validators , FormGroup , FormBuilder } from '@angular/forms' ; import { CreditCardValidators , CreditCard } from 'angular-cc-library' ; import { defer } from 'rxjs' ; import { map } from 'rxjs/operators' ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , } ) export class AppComponent implements OnInit { public demoForm : FormGroup ; public submitted = false ; public type$ = defer ( ( ) => this . demoForm . get ( 'creditCard' ) . valueChanges ) . pipe ( map ( ( num ) => CreditCard . cardType ( num ) ) ) ; constructor ( private fb ) { } public ngOnInit ( ) { this . demoForm = this . fb . group ( { creditCard : [ '' , [ CreditCardValidators . validateCCNumber ] ] , expDate : [ '' , [ CreditCardValidators . validateExpDate ] ] , cvc : [ '' , [ Validators . required , Validators . minLength ( 3 ) , Validators . maxLength ( 4 ) ] ] , } ) ; } public goToNextField ( controlName , nextField ) { if ( this . demoForm . get ( controlName ) ?. valid ) { nextField . focus ( ) ; } } public onSubmit ( demoForm ) { this . submitted = true ; console . log ( demoForm . value ) ; } }