通过按角度 4 中的 enter 键提交表单答案

【问题标题】：Submitting a form by pressing enter key in angular 4通过按角度 4 中的 enter 键提交表单
【发布时间】：2023-03-30 08:10:01
【问题描述】：

按 Enter 键需要以 Angular 4 提交表单下面是我的Action = "" 形式的代码不起作用。我也试过(keydown) = domonething(event)和(keydown.enter) = domonething(event) 用下面的代码

keyDownFunction(event) {
    if (event.keyCode == 13) {
        this.submit();
    }
}

下面是我当前的代码

<form #f="ngForm" (ngSubmit)="f.form.valid && openModal(confirmationmodal)" novalidate action="">
    <div class="form-group form-row">
        <label class="col-form-label col-sm-4 col-md-4" for="name">Employee Name</label>
        <div class="col-sm-8 col-md-8">
            <span type="text" readonly class="form-control-plaintext" id="name">{{employeeDetails.EmployeeName}}</span>
        </div>
    </div>
    <div class="form-group form-row">
        <label class="col-form-label col-sm-4 col-md-4 " for="name">Manager Name</label>
        <div class="col-md-8  col-sm-8">
            <span type="text" readonly class="form-control-plaintext"
                id="manager">{{employeeDetails.ManagerName}}</span>
        </div>
    </div>
    <div class="form-group form-row">
        <label for="name" class="col-sm-4 col-md-4 col-form-label">Subject</label>
        <div class="col-md-8 col-sm-8">
            <span type="text" readonly class="form-control-plaintext" id="manager">{{subject}}</span>
        </div>
    </div>

    <button class="btn btn-success float-right" type="submit" id="submit">Submit</button>
</form>

【问题讨论】：

与stackoverflow.com/questions/37577919/…重复
angular2 submit form by pressing enter without submit button的可能重复
上面的评论也是上面那个的重复

标签： angular angular4-forms

【解决方案1】：

在提交按钮中输入(keyup.enter)="yourFunction()"

【讨论】：

【解决方案2】：

从您的表单标签中，我将删除 action 属性并添加以下内容：

<form #f="ngForm" (ngSubmit)="f.form.valid && openModal(confirmationmodal)" novalidate (keydown.enter)="onEnterKeyDown($event)">

然后简单的写下按键事件的函数：

onEnterKeyDown($event) {
  // here you can open your confirmation modal if the form is valid
}

来源：https://alligator.io/angular/binding-keyup-keydown-events/

【讨论】：

【解决方案3】：

这应该可以工作

(keydown)="keyDownFunction($event)

在打字稿中

  keyDownFunction(event) {
    if ( event.keyCode === 13) {
      // do your function
    }
  }

这对我有用。我认为您在活动前错过了 $。

【讨论】：

【解决方案4】：

如果你想用按钮调用它，那么你可以这样做 -

<button type="button" (keyup.enter)="doSomething()" >Click Me!</button>

在这里观看现场直播- https://stackblitz.com/edit/angular-3gf6hw

【讨论】：