Error signature pad undefined is not an object Ionic

Ionic Framework ionic-v3
1

Hello,

I’ve used angular2-signaturepad. I have this error :
“undefined is not an object (evaluating ‘this.signaturePad.toDataUrl’)”

With this code :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {SignaturePad} from 'angular2-signaturepad/signature-pad';

@Component({
  selector: 'page-envoie',
  templateUrl: 'envoie.html'
})
export class EnvoiePage {
  public signaturePad : SignaturePad;

  public signaturePadOptions : Object = {
    'minWidth': 2,
    'canvasWidth': 340,
    'canvasHeight': 200
  };
  public signatureImage : string;

  constructor(public navCtrl: NavController) {

  }

   drawComplete() {
    this.signatureImage = this.signaturePad.toDataURL();
    this.navCtrl.push(EnvoiePage, {signatureImage: this.signatureImage});
  }

  drawClear() {
    this.signaturePad.clear();
  }

}


<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Tarifs</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Rapport d'intervention</h3>

  <signature-pad [options]="signaturePadOptions"  id="signatureCanvas"></signature-pad>
<ion-grid>
  <ion-row>
    <ion-col col-4>
<button ion-button full color="danger" (click)="drawCancel()">Cancel</button>
    </ion-col>
    <ion-col col-4>
<button ion-button full color="light" (click)="drawClear()">Clear</button>
    </ion-col>
    <ion-col col-4>
<button ion-button full color="secondary" (click)="drawComplete()">Done</button>
    </ion-col>
  </ion-row>
</ion-grid>


<div><img [src]="signatureImage" *ngIf="signatureImage" /></div>

</ion-content>

Can you help me? I don’t know what’s wrong

2

You need to inject SignaturePad into your class, so move signaturePad : SignaturePad into your constructor.

1 Like
3

Ohhh my bad ! Thank you, now I have another error… “Uncaught (in promise): No provider for SignaturePad…”

4

Add it in your app module’s providers.

1 Like
5

Already done

providers: [ StatusBar, SplashScreen, SignaturePadModule, {provide: ErrorHandler, useClass: IonicErrorHandler} ]

6

Generally, modules go in imports, while classes go in providers.