Forms angular2按enter键提交表单，但不按submit按钮

是否可以提交没有“提交”按钮的表单（按enter键） 例如：

<form [ngFormModel]="xxx" (ngSubmit)="xxxx()">
  <input [(ngModel)]="lxxR"   ngControl="xxxxx"/>
</form

您可以将
按键或
向下键添加到输入字段，并将事件分配给在单击enter时进行提交的函数

您的模板将如下所示


编辑：

  <form (submit)="submit()" >
    <input />
    <button type="submit" style="display:none">hidden submit</button>
  </form>

您还可以添加
（keyup.enter）=“xxxx（）”
这种方法非常简单

<form [formGroup]="form" (keyup.enter)="yourMethod(form.value)">

</form>

添加一个不可见的提交按钮就可以了

我更喜欢
（keydown.enter）=“mySubmit（）”
，因为如果光标位于
的某个位置，而不是在其末端，则不会添加换行符。
希望这可以帮助某些人：由于某些原因，我无法跟踪，因为时间不够，如果您有如下表单：

<form (ngSubmit)="doSubmit($event)">
  <button (click)="clearForm()">Clear</button>
  <button type="submit">Submit</button>
</form>


清楚的
提交

当您点击
Enter
按钮时，调用
clearForm
函数，即使预期的行为是调用
doSubmit
函数。
将
清除
按钮更改为
标签为我解决了这个问题。
我仍然想知道这是否是预期的。似乎让我感到困惑
只要简单地添加
（keyup.enter）=“yourFunction（）”
如果您想同时包含这两个选项-输入时接受和单击时接受，然后执行-

 <div class="form-group">
    <input class="form-control"   type="text" 
    name="search" placeholder="Enter Search Text"
              [(ngModel)]="filterdata"  
           (keyup.enter)="searchByText(filterdata)">
  <button type="submit"  
          (click)="searchByText(filterdata)" >

  </div>

始终使用keydown.enter而不是keyup.enter以避免滞后

<textarea [(ngModel)]="textValue" (keydown.enter)="sendMessage();false" ></textarea>

如果您想将和都包含在表单中，只需将按钮包含在表单中即可

发送消息的函数示例：

                <form>
                    <mat-form-field> <!-- In my case I'm using material design -->
                        <input matInput #message maxlength="256" placeholder="Message">
                    </mat-form-field>
                    <button (click)="addMessage(message.value)">Send message
                    </button>
                </form>


发送消息

您可以在单击按钮或按enter键之间进行选择。
将其添加到输入标签中

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



这应该是有效的，并且已经在许多答案中提到过，但是这应该出现在表单标签上，而不是按钮上
 这里的大多数答案建议使用以下方法：



这种方法不会导致表单对象被标记为
submitted
。您可能不关心这一点，但如果您使用类似（无耻的自我提升）的方法来显示验证错误，您将需要修复它。以下是方法：


提交
您能提供一个plunker吗？因为它不工作，而是使用“可见性：隐藏；”。“display:none；”在chrome中工作，但在safari中不工作，除了提交按钮不应隐藏，但应可见，因为有些人会寻找该按钮，而不会费心按enter。如果您只想调用一个普通的旧函数，而不是提交句柄，这将非常有用。Angular文档中提到了这种方法。这是在我的情况下唯一有效的方法，谢谢！这应该是公认的答案。优雅只有在棱角分明的情况下才能实现。棒极了。在Angular文档中新提到：谢谢，这比我预期的要容易。解决方法如下：这种方法比使用$event发送函数简单得多。非常感谢。好多了。没有隐藏的按钮或js。纯角度方式必须这样做：使用角度9，但效果很好。为了避免这种情况，您必须指定type=“button”作为清除按钮使用“可见性：隐藏；”。上述方法在chrome中有效，但在safari中无效。这应该是公认的解决方案-更干净的Hank brother。我更喜欢这个选项而不是所选的答案。我不得不将它与@Clayton K.N.Passos答案结合使用，效果非常好！
                <form>
                    <mat-form-field> <!-- In my case I'm using material design -->
                        <input matInput #message maxlength="256" placeholder="Message">
                    </mat-form-field>
                    <button (click)="addMessage(message.value)">Send message
                    </button>
                </form>

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

(keyup.enter)="methodname()"