angular2通过按enter而不提交按钮提交表单

Question

是否可以提交没有提交按钮的表单（按回车键）示例：

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

Answer 1

也许您将 keypress 或 keydown 添加到输入字段并将事件分配给函数单击输入时将执行提交。

您的模板将如下所示

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

你的函数内部 class 看起来像这样

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

Answer 2

编辑：

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

为了使用这个方法，你需要有一个提交按钮，即使它没有显示"Thanks for "

旧答案：

~~是的，和你写的完全一样，除了事件名称是 (submit) 而不是 (ngSubmit):~~

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

Answer 3

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

Answer 4

这样就简单多了...

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

</form>

Answer 5

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

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

Answer 6

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

Answer 7

希望这可以帮助某人：出于某种原因，由于时间不够，我无法追踪，如果你有这样的表格：

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

当您点击 Enter 按钮时，会调用 clearForm 函数，尽管预期的行为是调用 doSubmit 函数。将 Clear 按钮更改为 <a> 标签为我解决了这个问题。我仍然想知道这是否是预期的。我觉得很困惑

Answer 8

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

Answer 9

如果你想包括两者 - 输入时接受和点击时接受然后做 -

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

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

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

并在 component.ts

中发挥作用

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

Answer 11

如果您想包含比我在此处看到的更简单的两者，只需将按钮包含在表单中即可。

发送消息的函数示例：

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

您可以选择单击按钮或按回车键。

Answer 12

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

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

Answer 13

(keyup.enter)="methodname()"

这应该有效并且已经在许多答案中提到过，但是它应该出现在表单标签上而不是按钮上。

Answer 14

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

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

嗯，这里有一个小警告，我想说。 None 如果您想提交表单，除非您单击表单上的任意位置或特别是在输入字段上，否则以上方法将有效。

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

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

在 TS 文件中：

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

}

或

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

angular2通过按enter而不提交按钮提交表单

angular2 submit form by pressing enter without submit button

forms

submit

angular