Cannot read property 'getAttribute' of undefined in angular 6

[harleenarora]

Hi,

If reload the page, show error in angular 6 application.

Error:- ERROR TypeError: Cannot read property 'getAttribute' of undefined at new Card (card.js:125) at NgxCard.push../node_modules/ngx-card/card.js.NgxCard.ngAfterViewInit (card.js:41) at callProviderLifecycles (core.js:9567) at callElementProvidersLifecycles (core.js:9541) at callLifecycleHooksChildrenFirst (core.js:9531) at checkAndUpdateView (core.js:10467) at callViewAction (core.js:10699) at execComponentViewsAction (core.js:10641) at checkAndUpdateView (core.js:10464) at callViewAction (core.js:10699)

Code :- component.html:-

<form card container=".card-container" [formGroup] = "FormOne">
   <input matInput type="text" placeholder="Card Number" formControlName="card_number" card-number>
   <input matInput type="text" placeholder="Name" formControlName="card_name" card-name>
   <input matInput type="text" placeholder="CVV" formControlName="cvv" card-cvc>
   <input matInput type="text" placeholder="Expiry Date (01/10)" formControlName="expiry_date" card-expiry>
   <div>
      <div class="card-container"></div>
   </div>
</form>

component.ts:-

`import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup, FormBuilder} from '@angular/forms';

export class appComponent implements OnInit{

FormOne : FormGroup;

constructor(private formGroup : FormBuilder) { }

ngOnInit() { this.FormOne = this.formGroup.group({ card_number : ['', [Validators.required]], card_name : ['', [Validators.required]], cvv : ['', [Validators.required]], expiry_date : ['', [Validators.required]] }); } }`

Please tell me how to solve this error?

[francojay]

Yeah I'm getting the same thing

[SystemOrb]

same problem anyone could fix this?

[francojay]

I was able to get it to work with a different wrapper library. Look for ngx-credit-card on github. Clone it, and copy over the lib folder. Import the module in the lib folder and it should work

[ihym]

Works fine for me in angular 6. Use it like this

<div class="card-container"></div>
<form card
  container=".card-container"
  card-width="500"
  [messages]="messages"
  [placeholders]="placeholders"
  [masks]="masks"
  formatting="false"
  debug="true">

  <input type="text" name="number" card-number/>
  <input type="text" name="first-name" card-name/>
  <input type="text" name="last-name" card-name/>
  <input type="text" name="expiry" card-expiry/>
  <input type="text" name="cvc" card-cvc/>
</form>

[digoburigo]

For me worked like this: First install the card.js npm install card --save then npm install ngx-card --save After the installation process put the card.js in the angular.json file

"styles": [
              ...
              "node_modules/card/dist/card.css"
            ],
            "scripts": [
              ...
              "node_modules/card/dist/card.js"
            ]

Put the html example in your component html

<div class="card-container"></div>
<form card
  container=".card-container"
  card-width="500"
  [messages]="messages"
  [placeholders]="placeholders"
  [masks]="masks"
  formatting="false"
  debug="true">

  <input type="text" name="number" card-number/>
  <input type="text" name="first-name" card-name/>
  <input type="text" name="last-name" card-name/>
  <input type="text" name="expiry" card-expiry/>
  <input type="text" name="cvc" card-cvc/>
</form>

Then in the component.ts declare your variables, something like this:

 // Strings for translation - optional
    messages = {
        validDate: 'valid\ndate', // optional - default 'valid\nthru'
        monthYear: 'mm/yyyy', // optional - default 'month/year'
    };

    // Default placeholders for rendered fields - optional
    placeholders = {
        number: '•••• •••• •••• ••••',
        name: 'Full Name',
        expiry: '••/••',
        cvc: '•••'
    };

    masks = {
        cardNumber: '•' // optional - mask card number
    };

Angular version: "@angular/core": "6.1.7" Forgot to add, you have to import the CardModule in the module that your component is declared

[swarup-b]

This is not working in angular 8

[ClintDavis]

My workaround for this was:

component.ts

....
public pageLoaded: boolean = false;

...
export class PaymentCardComponent implements OnInit, AfterViewInit
...

ngAfterViewInit(): void {
    setTimeout(() => {
      this.pageLoaded = true;
    });
  }

....

component.html

....
<form *ngIf="pageLoaded" card container=".cardjs-container"
....