timofei-iatsenko / angular-cc-library

Library to support Credit Card input masking and validation
MIT License
82 stars 71 forks source link

Export directives with basic API #45

Closed arturhun closed 4 years ago

arturhun commented 5 years ago

Please export the directives so that user is able to use a template variable for more advanced UI stuff, like ngIfing certain elements based on whether/how the card has been identified.

Also, provide public api to access information, such as what the card has been identified as.

<input type="tel"
          id="input-cc-number"
          autocomplete="input-cc-number"
          formControlName="cardNumber"
          ccNumber
          #ccNumberInput="ccNumber"
/>

somewhere else:

<p *ngIf="ccNumberInput.verifiedAs === 'visa'">
  show some info
</p>

or change CVC label to CID in case American Express

timofei-iatsenko commented 4 years ago

There is already a way to implement this, just use CreditCard class from a library, but I will also put this into a projects roadmap because this seems not really hard to do and will not break anything.

  public type$ = defer(() => this.demoForm.get('creditCard').valueChanges)
    .pipe(map((num: string) => CreditCard.cardType(num)));
 <small class="text-muted" *ngIf="type$ | async as type">
        <span class="cc-brand">{{type}}</span>
</small>
timofei-iatsenko commented 4 years ago

Implemented in v2.0.0