How to get input value in TypeScript (ember)?

Question

I am new to Ember, try to make simple todo app by my own after YT tutorial. However I have a problem when I try to access input value.

Property 'value' does not exist on type 'EventTarget'

My function:

updateNewItemValue(event: InputEvent) {
    this.newItem = event!.target.value;
 }

Using it in template:

<input
    type='text'
    {{on 'input' this.updateNewItemValue}}
    value={{this.newItem}}
/>

Maybe am I using wrong type for event argument?

NullVoxPopuli · Accepted Answer · 2022-05-10 15:32:14Z

0

in Typescript, it doesn't know what sort of element the event will be coming from. So what I like to do is assert that the element is correct.

This has the advantage of providing a clear message to developers when they mis-configure something.

Additionally, assert is removed in production builds.

import { assert } from '@ember/debug';

// ...

updateNewItemValue(event: Event) {
  assert(
    `Expected input event handler to be used an an 'input' element,` + 
    ` instead received: ${event.target.tagName}.`,
    event.target instanceof HTMLInputElement
  );

  this.newItem = event.target.value;
}

answered May 10, 2022 at 15:32

NullVoxPopuli

65.6k76 gold badges216 silver badges364 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get input value in TypeScript (ember)?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related