Question

我试图在用户单击按钮后获取文本区域输入值。我需要.ts文件中的值。

这是我的代码并尝试

    <div id="notes-container">
      <label>My Queries</label>
      <textarea id="query" placeholder="Enter here"></textarea>
      <button class="main" (click)="close()"> Back </button>
      <button class="main" (click)="sendQuery($query)"> Send Query </button>
    </div>

.ts文件

console.log(this.query);

我目前没有任何价值，有什么想法吗？

Answer 1

您需要使用如下参考变量：

<div id="notes-container">
  <label>My Queries</label>
  <textarea #textArea id="query" placeholder="Enter here"></textarea>
  <button class="main" (click)="close()"> Back </button>
  <button class="main" (click)="sendQuery(textArea.value)"> Send Query </button>
</div>

但是我建议对所有与表单/输入相关的内容使用Reactive Forms。

Answer 2

使用模板变量。

component.html：

<textarea #test>
  test
</textarea>
<button (click)="sendQuery(test)"> Send Query </button>

component.ts：

export class AppComponent  {
  sendQuery(test) { console.log(test.value) }
}

在不使用ngModel的情况下单击按钮时从文本区域获取输入值

2 个答案: