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

【问题标题】：Get input value from text area when clicking a button without using ngModel在不使用 ngModel 的情况下单击按钮时从文本区域获取输入值
【发布时间】：2023-03-18 00:10:01
【问题描述】：

我试图在用户单击按钮后获取文本区域输入值。我需要 .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);

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

【问题讨论】：

标签： angular

【解决方案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 用于所有与表单/输入相关的内容。

【讨论】：

【解决方案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) }
}

【讨论】：