CODEWITHSUNDEEP
canvasionic2html5-canvasangular2-formbuilder
sizzle
sizzle

Reputation: 2332

ionic 2 framework signature-pad formbuilder issue

I am getting this error when I try to navigate to the mytest page in my Ionic 2 framework based app:

Runtime Error Uncaught (in promise): TypeError: sp is not a constructor TypeError: sp is not a constructor at SignaturePad.ngAfterContentInit (http://localhost:8100/build/main.js:63958:29) at callProviderLifecycles (http://localhost:8100/build/main.js:11544:18) at callElementProvidersLifecycles (http://localhost:8100/build/main.js:11525:13) at callLifecycleHooksChildrenFirst (http://localhost:8100/build/main.js:11509:17) at checkAndUpdateView (http://localhost:8100/build/main.js:12526:5) at callViewAction (http://localhost:8100/build/main.js:12838:17) at execComponentViewsAction (http://localhost:8100/build/main.js:12784:13) at checkAndUpdateView (http://localhost:8100/build/main.js:12529:5) at callViewAction (http://localhost:8100/build/main.js:12838:17) at execEmbeddedViewsAction (http://localhost:8100/build/main.js:12810:17) at checkAndUpdateView (http://localhost:8100/build/main.js:12524:5) at callViewAction (http://localhost:8100/build/main.js:12838:17) at execComponentViewsAction (http://localhost:8100/build/main.js:12784:13) at checkAndUpdateView (http://localhost:8100/build/main.js:12529:5) at callWithDebugContext (http://localhost:8100/build/main.js:13511:42)

I put some debug code in the angular2-signaturepad node module's SignaturePad.prototype.ngAfterContentInit function and it looks like the canvas object is empty.

What am I doing wrong?

My source code:

app.module.ts:

...

import { SignaturePadModule } from 'angular2-signaturepad';
import { IonicStorageModule } from '@ionic/storage';

...

  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    CloudModule.forRoot(cloudSettings),
    SignaturePadModule,
    IonicStorageModule.forRoot()
  ],

...

mytest.ts

...

import { SignaturePad } from 'angular2-signaturepad/signature-pad';
import { Storage } from '@ionic/storage';

...

@ViewChild('mySlider') mySlider: any;
@ViewChild(SignaturePad) signaturePad: SignaturePad;

  signaturePadOptions: Object = {
   'minWidth': 2,
   'canvasWidth': 400,
   'canvasHeight': 200,
   'backgroundColor': '#f6fbff',
   'penColor': '#666a73'
  };

  constructor(public viewCtrl: ViewController,
          public auth: Auth,
          public navCtrl: NavController,
          public navParams: NavParams,
          public events: Events,
          public tabsService: TabsService,
          public formBuilder: FormBuilder,
          public alert: AlertController,
          public storage: Storage) {
    this.slide2Form = formBuilder.group({ });
}
...

mytest.html

<ion-content>
<ion-slides #mySlider>
<ion-slide>
  <ion-list no-lines>
    <form [formGroup]="slide2Form">
      <ion-item>
        <ion-label>Date</ion-label>
        <ion-datetime displayFormat="MMMM/DD/YYYY" formControlName="signatureSigned"></ion-datetime>
      </ion-item>

      <ion-item>
        <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
        <button ion-button full color="danger" (click)="clearPad()">Clear</button>
      </ion-item>
    </form>
  </ion-list>
  </div>
</ion-slide>  
</ion-slides>                                  
</ion-content>  
...

Upvotes: 3

Views: 1542

Answers (3)

Otto
Otto

Reputation: 4200

In my case the solution was to update to version 2.6.0 (I was using 2.2.0)

npm install [email protected] --save

Upvotes: 0

sizzle
sizzle

Reputation: 2332

I figured out the issue. I was importing both the signature_pad and angular2-signaturepad node modules. Even though I was not using the signature_pad one (it is included as a dependency in the angular2-signaturepad module), it was causing the runtime error above. I removed the signature_pad module:

npm uninstall signature_pad

I then restarted the app and it worked.

Upvotes: 0

ApriOri
ApriOri

Reputation: 2688

Your code seems to be ok but it might be an issue with signature_pad, maybe you're not importing it the right way, try:

import * as SignaturePad from 'signature_pad';

From looking at the code here: https://github.com/wulfsolter/angular2-signaturepad/blob/master/signature-pad.ts

it seems that "sp" is trying to load a module using a "require"

This link might also shed some light on this issue

Upvotes: 2

Related Questions