在 Angular 2 中，如何在按 Enter 时提交输入类型 =“文本”值？答案

【问题标题】：In Angular 2, how do I submit an input type="text" value upon pressing enter?在 Angular 2 中，如何在按 Enter 时提交输入类型 =“文本”值？
【发布时间】：2016-12-04 04:14:24
【问题描述】：

我正在我的 Angular 2 应用程序中构建一个搜索框，尝试在点击“Enter”时提交值（表单不包含按钮）。

模板

<input type="text" id="search" class="form-control search-input" name="search" placeholder="Search..." [(ngModel)]="query" (ngSubmit)="this.onSubmit(query)">

使用简单的 onSubmit 函数进行测试...

export class HeaderComponent implements OnInit {
  constructor() {}

  onSubmit(value: string): void {
    alert('Submitted value: ' + value);
  }
}

ngSubmit 在这种情况下似乎不起作用。那么解决这个问题的“Angular 2 方式”是什么？（最好没有隐藏按钮之类的技巧）

【问题讨论】：

标签： angular

【解决方案1】：

(keyup.enter)="methodInsideYourComponent()" 在你的输入标签中添加这个

【讨论】：

不错！我通过用<form (keydown)="keyDownFunction($event)"><input type="text" /></form> 包装它来让它工作，但你的方式更简洁！
这在Angular Docs中也有提及。
另外，您可以通过methodInsideYourComponent($event)发送输入信息并通过evt.target.value方法访问它

【解决方案2】：

在普通 HTML 中，您需要 <button type="submit" ></button> 或 <input type="submit" /> 来在按下回车键时提交表单。这些元素可以被 css 隐藏，但必须存在于表单中。 ng-submit 应该和普通的onsubmit 事件绑定，触发条件相同。

同样从您发布的代码来看，您没有表单元素，只有输入字段，并且ng-submit 指令仅适用于表单，因为输入元素没有onsubmit JS 事件。

【讨论】：

【解决方案3】：

您可以将此文本框放在表单标签内并在表单上设置 ngSubmit 事件，即

<form (ngSubmit)="YouMethod()">
    <input type="text" class="form-control input-lg" />
</form>

【讨论】：

【解决方案4】：

为了完整起见，这个解决方案也适用于我：

<form (keydown)="keyDownFunction($event)"><input type="text" /></form>

【讨论】：