通过按Enter而不提交按钮来提交angular2提交表单

是否可以提交没有提交按钮的表单（通过按Enter键）示例：

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

也许您在输入字段中添加keypress或keydown并将事件分配给将在单击enter时执行提交的功能

您的模板如下所示

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

而且您在类中的功能如下所示

keyDownFunction(event) {
  if (event.keyCode === 13) {
    alert('you just pressed the enter key');
    // rest of your code
  }
}

您也可以添加 (keyup.enter)="xxxx()"

编辑：

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

为了使用此方法，即使未显示“感谢工具包的答案 ” ，也需要有一个提交按钮。

旧答案：

是的，与您编写的完全一样，只是事件名称(submit)不是(ngSubmit)：

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

我更喜欢，(keydown.enter)="mySubmit()"因为如果光标位于内<textarea>但不在其末端，则不会添加换行符。

这种方法很简单...

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

</form>

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

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

并在component.ts内部起作用

 textValue : string = '';  
 sendMessage() {
    console.log(this.textValue);
    this.textValue = '';
  }

将此添加到您的输入标签中

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

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

<input type="submit" style="display: none;">

只需添加 (keyup.enter)="yourFunction()"

(keyup.enter)="methodname()"

这应该可行，并且已经在许多答案中提到，但是应该在表单标签上而不是按钮上显示。

希望这可以对某人有所帮助：由于某种原因，我缺少时间，因此无法跟踪，如果您的表单如下：

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

当您按下Enter按钮时，将clearForm调用该函数，即使预期的行为是调用该doSubmit函数。将Clear按钮更改为<a>标签可以为我解决问题。我仍然想知道这是否是预期的。似乎让我感到困惑

如果你想包括两个比我在这里看到的更简单的方法，则只需在窗体中包含按钮即可。

函数发送消息的示例：

                <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键。

如果您想同时包含这两个内容-输入时接受，单击时接受，然后执行-

 <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>