So the following code is in Angular 4 and I can't figure out why it doesn't work the way as expected.
Here is a snippet of my handler:
onUpdatingServerName(event: Event) {
console.log(event);
this.newserverName = event.target.value; //this wont work
}
HTML element:
<input type="text" class="form-control" (input)="onUpdatingServerName($event)">
The code gives me the error:
Property 'value' does not exist on type 'EventTarget'.
But as it can be seen in the console.log that value does exist on the event.target.
event.target here is an HTMLElement which is the parent of all HTML elements, but isn't guaranteed to have the property value. TypeScript detects this and throws the error. Cast event.target to the appropriate HTML element to ensure it is HTMLInputElement which does have a value property:
(<HTMLInputElement>event.target).value
Per the documentation:
Type the
$eventThe example above casts the
$eventas ananytype. That simplifies the code at a cost. There is no type information that could reveal properties of the event object and prevent silly mistakes.[...]
The
$eventis now a specificKeyboardEvent. Not all elements have avalueproperty so it caststargetto an input element.
(Emphasis mine)
Passing HTMLInputElement as a generic to the event type should work too:
onUpdatingServerName(event: React.ChangeEvent<HTMLInputElement>) {
console.log(event);
this.newserverName = event.target.value;
}
Here's another fix that works for me:
(event.target as HTMLInputElement).value
That should get rid of the error by letting TS know that event.target is an HTMLInputElement, which inherently has a value. Before specifying, TS likely only knew that event alone was an HTMLInputElement, thus according to TS the keyed-in target was some randomly mapped value that could be anything.