Angular在keyup.enter上将输入的当前文本发送给方法

Question

我有一个输入，我想获取当前输入的文本并将其发送给方法。

代码如下：

app.component.html

<input type="text" (keyup.enter)="sendit()" />

app.component.ts

sendit() {
    console.log(The text in the input);
}

我该怎么做？

Answer 1

只需执行以下操作即可

<input type="text" (keyup.enter)="sendit($event.target.value)" />

 sendit(data){
    console.log("Value",data)
 }

在这里使用双向绑定是一种解决方案，

how to get value from textbox using typescript in angular 2

希望对您有帮助。

谢谢

穆图

Answer 2

为input元素创建一个模板变量，并像这样传递您的输入值

<input #inp type="text" (keyup.enter)="sendit(inp.value)" />
       ^^^^                                   ^^^^^^^^^

接受通过

sendit(inputValue) {
    console.log(inputValue);
}

Answer 3

您可以通过多种方式执行此操作：

为input使用模板变量。您将像这样获得value：

<input #yourInput type="text" (keyup.enter)="sendit(yourInput.value)" />

在Component中，如下所示：

sendit(inputValue) {
  console.log(inputValue);
}

或者，您也可以使用[(ngModel)]通过两种方式绑定文本字段：

<input 
  type="text" 
  [(ngModel)]="bindedTwoWays"
  (keyup.enter)="sendit(bindedTwoWays)" >

在组件中：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  bindedTwoWays = 'Angular';

  sendit(inputValue) {
    console.log(inputValue);
  }
}

---

  

这是Working Sample StackBlitz，其中包含两种供您参考的方法。