InfomediaLtd / angular2-materialize

Angular 2 support for Materialize CSS framework.
https://infomedialtd.github.io/angular2-materialize/
MIT License
406 stars 139 forks source link

pickatime: cannot read property 'apply' of undefined #372

Open brockklein opened 7 years ago

brockklein commented 7 years ago

Absolutely love this project and wish I were proficient enough to identify this issue on my own. I'm hoping it's user error.

Just upgraded to 15.1.9 from 6.x and was going to (happily) switch to angular2-matrialize's date/time pickers from md2-datepicker.

The datepicker worked like a charm but I'm having trouble with the time picker.

Here's what I'm working with:

  <div class="row">
    <div class="col s4">

      <label for="birthdate2">Birthdate</label>
      <input id="birthdate2" name="birthdate2" formControlName="startDate"
             materialize="pickadate"
             [materializeParams]="[{format: 'mm/dd/yyyy'}]"
             type="text" />
    </div>
  </div>

  <div class="row">
    <div class="col s4">
      <label for="birthtime">Birthtime</label>
      <input id="birthtime" name="birthtime" materialize="pickatime" formControlName="endDate" [materializeParams]="[{twelvehour: true}]"
             placeholder="00:00" class="validate" type="text">
    </div>
  </div>

I'm consistently getting this error though:

ERROR TypeError: Cannot read property 'apply' of undefined
    at MaterializeDirective.webpackJsonp.../../../../angular2-materialize/dist/materialize-directive.js.MaterializeDirective.performElementUpdates (materialize-directive.js:190)
    at MaterializeDirective.webpackJsonp.../../../../angular2-materialize/dist/materialize-directive.js.MaterializeDirective.ngAfterViewInit (materialize-directive.js:76)
    at callProviderLifecycles (core.es5.js:11202)
    at callElementProvidersLifecycles (core.es5.js:11177)
    at callLifecycleHooksChildrenFirst (core.es5.js:11161)
    at checkAndUpdateView (core.es5.js:12271)
    at callViewAction (core.es5.js:12631)
    at execEmbeddedViewsAction (core.es5.js:12589)
    at checkAndUpdateView (core.es5.js:12264)
    at callViewAction (core.es5.js:12631)

If it's any help, here's the line where the problem occurs: https://github.com/InfomediaLtd/angular2-materialize/blob/88aa68f38ded712d6dc1e04a142bcfe20c79f244/src/materialize-directive.ts#L190

Here's the compiled JS just in case it might be helpful (since the apply is what's causing the issue apparently):

        if (this.isTimePicker()) {
            var /** @type {?} */ nativeElement_4 = this._el.nativeElement;
            var /** @type {?} */ jqueryPickerElement_2 = $(nativeElement_4);
            var /** @type {?} */ timePicker = jqueryPickerElement_2[this._functionName].apply(jqueryPickerElement_2, this._params);
            var /** @type {?} */ picker_2 = timePicker.pickatime('picker');
            setTimeout(function () {
                if (_this.ngModel) {
                    picker_2.val(_this.ngModel);
                }
                else {
                    picker_2.val(jqueryPickerElement_2.val());
                }
                jqueryPickerElement_2.on('change', function (e) { return nativeElement_4.dispatchEvent(((CustomEvent("input")))); });
            });
        }

Any chance someone can quickly spot a mistake I'm making? If not, any suggestions on how to fix it? I'm no expert, but I'd be happy to put together a PR if this is indeed a problem.