Property 'value' does not exist on type 'HTMLElement' for Textarea - Angular

Question

Using Angular 4 (typescript), I have the below HTML code:

 <div *ngIf="dataService.selected_markers.length == 0" id="tsnPasteContainer">
      <form style="width: 100%; height: 100%">
        <textarea id="tsn_list" style="width: 100%; height: 100%" type="text" name="tsn_list" placeholder="e.g. 2001311,2425302,2153542,2435974"></textarea>
      </form>
    </div>

I am trying to get the data that the user is typing into the textarea using:

public parseTSNs(){
    let tsnString = document.getElementById("tsn_list").value;
    console.log("User inputted string: " + tsnString);
}

This function is called by a button.

The code is not compiling due to:

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

This should be a simple function. What am I doing wrong? W3schools "getting values from textarea" shows '.value' as the required function!

Answer 1

You just have to assert that the type of your element is HTMLTextAreaElement. Because document.getElementById returns HTMLElement and not all html elements have the value property:

let tsnString = (document.getElementById("tsn_list") as HTMLTextAreaElement).value;

But seeing as you use Angular, you should probably be using data binding instead of querying the values yourself