cc-angular--library (3.2.0) not formatting the input fields in Angular 16.0.2

28 views Asked by At

Title: Issue with cc-angular--library v3.2.0 in Angular 16.0.2: Input Fields Not Formatting

Description:

I am facing an issue with the cc-angular--library version 3.2.0 in my Angular 16.0.2 application. I am using this library to format input fields related to credit card information. However, despite implementing the necessary directives and modules, the input fields are not being formatted as expected.

Problem: The input fields for credit card information are not being formatted automatically. Although my code correctly validates all input fields, the formatting functionality does not work as intended.

Code Snippets:

HTML Template:

  <mat-label class="mat-subtitle-2 f-s-16 f-w-600">* Card Number:</mat-label>
  <input matInput formControlName="CardNumber" ccNumber (input)="goToNextField('CardNumber', expireInput)" type="tel" autocomplete="cc-number" />
  <mat-error class="f-s-12 f-w-600 text-error" *ngIf="!addCardForm.get('CardNumber')?.valid && addCardForm.get('CardNumber')?.dirty">
    Credit Card is invalid
  </mat-error>
</mat-form-field> 

constructor(private fb: FormBuilder) {
  this.addCardForm = this.fb.group({
    HolderName: ["", Validators.required],
    CardNumber: ["", [Validators.required, CreditCardValidators.validateCCNumber]],
  });
} ````

Attempts:
I have imported CreditCardDirectivesModule as instructed in the documentation. I have also tried various solutions provided in the documentation, but none have resolved the issue. Despite correctly implementing the directives and modules, the input fields remain unformatted.

Desired Outcome:
I expect the input fields for credit card information to be automatically formatted according to the cc-angular--library functionality. The library should handle the formatting of the input fields without manual intervention, ensuring a seamless user experience.

I appreciate any insights or solutions on how to resolve this issue and successfully auto-format the input fields using the cc-angular--library. Thank you for your assistance.
0

There are 0 answers