Uncaught (in promise): Input 'options' defined multiple times in 'SignaturePad'

[wulfsolter]

Uncaught (in promise): Input 'options' defined multiple times in 'SignaturePad'

[sovanyio]

Removing the inputs: ['options'] in the component declarations makes this work for me through npm

[lathonez]

@sovanyio could you share the relevant code you used to invoke the signature pad please?

Ours looks like this:

controller

// snip
@Component({
  templateUrl: 'build/checkin/signaturePad/signaturePad.html',
  directives: [Button, SignaturePad]
})
// snip
  public signaturePadOptions: Object = {
    canvasWidth: 800,
    canvasHeight: 500
  };
// snip
  public doOnEnd(): void {
    this.valid = !this.signaturePad.isEmpty();
  }

template

<!-- snip -->
 <signature-pad [options]="signaturePadOptions" (onEndEvent)="doOnEnd()"></signature-pad>

[sovanyio]

controller

import { Component, ViewChild, forwardRef } from '@angular/core';
import { SignaturePad } from 'angular2-signaturepad';
import { NG_VALUE_ACCESSOR, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';

/*
  Generated class for the SignatureField component.

  See https://angular.io/docs/ts/latest/api/core/ComponentMetadata-class.html
  for more info on Angular 2 Components.
*/
@Component({
  selector: 'signature-field',
  templateUrl: 'build/components/signature-field/signature-field.html',
  directives: [
    REACTIVE_FORM_DIRECTIVES,
    SignaturePad
  ],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => SignatureField),
      multi: true
    }
  ]
})
export class SignatureField {
  @ViewChild(SignaturePad) signaturePad: SignaturePad;

  options: Object = {};

  _signature: any = null;

  propagateChange = (_: any) => {};

  get signature() {
    return this._signature;
  }

  set signature(value) {
    this._signature = value;
    this.propagateChange(this.signature);
  }

  writeValue(value: any) {
    this.signaturePad.fromDataURL(value);
  }

  registerOnChange(fn: any) {
    this.propagateChange = fn;
  }

  registerOnTouched() {}

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

  drawComplete() {
    this.signature = this.signaturePad.toDataURL();
  }
}

template

<signature-pad [options]="options" (onEndEvent)="drawComplete()"></signature-pad>

[lathonez]

Thanks a lot, will give it a whirl this coming week and see if I can replicate what you're seeing.

Off topic, what are you using to generate the controller class definition?

[sovanyio]

The ionic2 cli

[lathonez]

Sorry for the delayed response, I've been pretty busy with work this week.

I've done my best to implement your changes verbatim to my demo project, and cannot replicate the issue you've reported.

https://github.com/lathonez/clicker/compare/signaturepad-7?expand=1

Can you replicate the error on this branch? Your signature-field component is on a form in the second page ("Goodbye Ionic").

[sovanyio]

Ah I feel silly, I was super behind somehow on 1.0.4. Not sure how that happened. Anyway, closing. Thanks!

[pradeepranasinghe]

hi all,

could you please provide an example for 2 signature-pad instances setting different values from different data URLs?

Thanks!

[lathonez]

@pradeepranasinghe

You are very unlikely to get helpful responses from anyone by posting on closed issues.

[pradeepranasinghe]

Sorry! BTW thanks for your reply!