Knockout custom binding handler: valueAccessor is not a function

Viewed 680

I am trying to use a custom binding handler I've written for a text input field that has an input mask on it. However, when I am trying to use this, I get an error in my console:

Uncaught TypeError: valueAccessor(...) is not a function at HTMLInputElement.<anonymous> (knockout.bindings.ts:11) at HTMLInputElement.dispatch (jquery.js:5206) at HTMLInputElement.elemData.handle (jquery.js:5014) at Object.trigger (jquery.js:8201) at Object.simulate (jquery.js:8260) at HTMLDocument.handler (jquery.js:8319)

This is my binding handler:

import ko from 'knockout';
import $ from 'jquery';
import Inputmask from 'inputmask';
import moment from 'moment';

ko.bindingHandlers.dateInputMask = {
    init: function (element, valueAccessor, allBindings) {
        $(element).on('focusout change', function () {
            console.log(allBindings);
            if (element.inputmask.isComplete()) {
                let time = moment(element.value, 'DD-MM-YYYY HH:mm');
                valueAccessor()(time); //error thrown from this line
            } else {
                valueAccessor()(null);
            }
        });

        Inputmask('date').mask(element);
    },
    update: function (element, valueAccessor) {
        let value = ko.utils.unwrapObservable(valueAccessor());
        let text = moment(value).format('DD-MM-YYYY HH:mm');
        element.value = text;
    }
}

My page model (stripped of irrelevant fields):

import ko from 'knockout';
import moment from 'moment';

export class EventModel {
    startDate: KnockoutObservable<moment.Moment>;
    endDate: KnockoutObservable<moment.Moment>;

    constructor(params: any) {
        this.startDate = ko.observable<moment.Moment>(moment());
        this.endDate = ko.observable<moment.Moment>(params.endDate || moment());
    }
}

The HTML:

<div class="form-group row">
    <label class="col-lg-3 col-form-label">Startdatum</label>
    <div class="col-lg-8">
        <input class="form-control date" data-bind="dateInputMask: startDate" />
    </div>
</div>

A screen of the console when putting a breakpoint on the init line to see the value of valueAccessor: valueAccessor

A screenshot of the model's json rendered in the HTML (there are some fields in there that I stripped from the model code above): json Any help would be greatly appreciated. From what I can tell, these errors usually mean the passed valueAccessor is not an observable, but I don't think that's the case here.

0 Answers
Related