What is the reason for "ERROR TypeError: this.onChange is not a function"?

Viewed 7458

My code is here.

Would you tell me the browser return the following error message:

ERROR TypeError: this.onChange is not a function
at RichTextEditorComponent.forwardEvent (rich-text-editor.component.ts:39)
at Object.eval [as handleEvent] (RichTextEditorComponent.html:6)

I have tried to print the "this" object to console, it returns the "RichTextEditorComponent" object only.

2 Answers

There's a problem inside your RichTextEditorComponent where you declare onChange and onTouched to be of type function without really assigning them the actual function.

onChange: (value:any) => {};
onTouched: () => {};

It should be rewritten as follows (using =)

onChange = (value:any) => {};
onTouched = () => {};

While the type of onChange is a function, I don't see anything actually setting the value, it is undefined (hence, not a function).

In rich-text-editor.component.ts:

onChange: (value:any) => {};

// and

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

Nothing is calling registerOnChange to set the value of onChange.

Related