如何使用 Angular 2 / 4 在表单中禁用输入操作？答案

【问题标题】：How to disable an enter-action within a form using Angular 2 / 4?如何使用 Angular 2 / 4 在表单中禁用输入操作？
【发布时间】：2018-04-22 06:51:50
【问题描述】：

我正在更新一个在 Angular 4 中制作的项目。该网站由多个表单组成，其中包括输入字段。当用户按下“输入”时，表单正在提交。我想防止这种情况发生。我该怎么做？

我可以在引号内放置一些东西来阻止提交操作的发生：(keydown.enter)=""

form.component.html

<div class="d-flex justify-content-center hm-row">
  <form class="hm-form" [formGroup]="crossingForm">
    <div class="form-group">
      <label for="dynamicThresholdTime">{{ 'CROSSING.DYNAMIC_THRESHOLD_TIME' | translate}}</label>
      <input type="text" class="form-control" id="dynamicThresholdTime" placeholder="" formControlName="dynamicThresholdTime">
     </div>
     <...more code...>
   </form>
</div>

【问题讨论】：

标签： html angular angular2-forms

【解决方案1】：

带有type="submit" 的按钮具有默认行为。无默认选择type="button"。

表单和输入字段也会发生这种情况。 event.preventDefault() 在我的客户端脚本中解决了这个问题。

【讨论】：

【解决方案2】：

您还可以删除form 标记并将其替换为div。由于表单标签，浏览器会做出这种行为。

【讨论】：

你是<button type="submit"> 吗？
我的错，对不起。这行得通，但我更喜欢@Vivek 他的方法。谢谢！

【解决方案3】：

使用这个：

<form (keydown.enter)="$event.preventDefault()"></form>

【讨论】：

我的错！这有帮助。我在同名的错误组件类中，但被放置在另一个文件夹中......