Question

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

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

Answer 1

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

Answer 2

修改

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

要使用此方法，即使未显示“感谢Toolkit's answer”，您也需要提交按钮

旧答案：

~~是的，正如您所写，但事件名称为(submit)而不是(ngSubmit)：~~

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

<击>

Answer 3

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

你的模板看起来像这样

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

你在班级里面的功能看起来像这样

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

Answer 4

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

Answer 5

这种方式很简单......

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

</form>

Answer 6

添加一个不可见的提交按钮可以解决这个问题

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

Answer 7

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

即可

Answer 8

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

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

和component.ts内部的功能

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

Answer 9

希望这可以帮助某些人：由于某些原因，如果您有以下形式，我无法追踪，如果您有以下形式：

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

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

Answer 10

(keyup.enter)="methodname()"

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

Answer 11

这里的大多数答案建议使用类似的东西：

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

</form>

此方法不会导致将表单对象标记为submitted。您可能对此并不在意，但是如果您使用@ngspot/ngx-errors（无耻的自我促销）之类的东西来显示验证错误，则需要解决该问题。方法如下：

<form [formGroup]="form" (ngSubmit)="yourMethod()" (keyup.enter)="submitBtn.click()">
  <button #submitBtn>Submit</button>
</form>

Answer 12

如果你想同时包括 - 在输入时接受并在点击时接受，那么 -

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

Answer 13

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

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

Answer 14

如果要包括比我在这里看到的更简单的和，只需在表单中包含按钮即可。

具有发送消息功能的示例：

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

Answer 15

好吧，我想说的是，这里有一个小警告。如果您想提交表单，则上述方法均无效，除非您点击表单上的任意位置或专门点击输入字段。

好吧，如果你想通过回车而不点击任何地方来提交表单，你需要在 html 中全局声明它：

<button (window:keypress)="onSomeAction($event)">

并在 TS 文件中：

onSomeAction(event){
if(event.keyCode===13){
  //submit form
}

}

或

<button (window:keypress.enter)="onSomeAction($event)">

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

15 个答案: