Textarea 的“HTMLElement”类型上不存在属性“value”-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

Answer 2

I had faced a similar issue while setting the value of a cell in the table.

I was adding the data as follows:

document.getElementById("table_id").rows[0].cells[0].innerHTML = "data_to_be_added";

And I was getting the following error:

error TS2339: Property 'rows' does not exist on type 'HTMLElement'

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

So I added the following tag and the ERROR got resolved.

(document.getElementById("table_id") as any).rows[0].cells[0].innerHTML = "data_to_be_added";

Here, you are expicitly changing the type of the variable as any.

Answer 3

You should use: [(ngModel)]='yourValue' to bind data to your controller. Textarea doesn't use value parameters.

Pleas read more information about HTML tag and its attributes hire .

Answer 4

Although it's not supposed to work like that, If you want to do it like this, first give your tag a reference with a # :

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

Then, in your component, import this:

import {ViewChild, ElementRef } from '@angular/core';

Declare a variable matching your reference:

@ViewChild('myTA') myTextArea: ElementRef;

In your method:

parseTSNs() {
    let el = this.myTextArea.nativeElement as HTMLElement;
    console.log(el.value);
}