Angular 2 防止enter在模板驱动的表单中提交

Question

我有使用模板驱动蓝图的表单，所以像这样：

<form #myForm="ngForm" ngSubmit="save(myForm.value, myForm.isValid)">
  <input #name="ngModel" [(ngModel)]="name">
  <button type="submit">Submit form</button>
</form>

现在，如何阻止 ENTER 提交表单？它会干扰表单内部的自定义 ENTER 行为，如果您不小心在输入中按了 enter，这是不需要的。

我环顾四周，找到了一些旧的 Angular 1 答案和一些标准的 JavaScript 答案，但我觉得 Angular 2 必须已经内置了类似的东西但是我还没找到。

如果他们不这样做，实现这一目标的最佳方法是什么？

Answer 1

原来你可以使用像这样简单的东西：

<form (keydown.enter)="$event.preventDefault()"></form>

防止表单在 ENTER 时提交。

Answer 2

让回车键在textareas有效，但不提交表单，可以修改如下：

在 HTML 模板中：

<form (keydown.enter)="handleEnterKeyPress($event)">...</form>

在组件的class后面的.ts代码中：

handleEnterKeyPress(event) {
    const tagName = event.target.tagName.toLowerCase();
    if (tagName !== 'textarea') {
      return false;
    }
  }

Answer 3

我知道我迟到了，但也许我有合适的解决方案，

如果您正在使用 <button> 则只需定义

<button type="button">

而不是定义它或将其定义为 type="submit" 因为如果你不定义它，它会提交你的表单。

同样，如果你使用 <input> 然后也定义

<input type="button">

这会起作用。

-- 编辑为@Chrillewoodz 评论。

如果你想在submit/click上做一些特定的处理，你可以给按钮添加点击事件，这样你就可以做任何你想做的事情。

如果你想要angular ts文件中的Form标签，那么你可以使用@ViewChild.

Answer 4

有同样的问题，这对我有帮助：

<button type="submit" [disabled]="!myForm.valid">Save</button>

Answer 5

Angular: 8.2.11

<div class="div101">
  <div class="card col-md-10">
    <form [formGroup]="postForm" (keydown.enter)="$event.preventDefault()" (ngSubmit)="onSubmit()">
      <br />
      <div class="form-group">
        <label class="col-md-3">Name</label>
        <input class="col-md-12 form-control" type="text" formControlName="Name" required>
      </div>

      <div class="form-group">
        <label class="col-md-4">Date of Birth</label>
        <input type="text" placeholder="Date of Birth" class=" col-md-12 form-control" formControlName="DateofBirth"
          required bsDatepicker>
      </div>

      <div class="form-group">
        <label class="col-md-3">Mobile No</label>
        <input class="col-md-12 form-control" type="text" formControlName="MobileNo" required>
      </div>


      <div class="form-group">
        <label for="SelectCountry" class="col-md-3">Country</label>
        <select class="col-md-12 form-control" formControlName="Country" (change)="onChangeCountry($event)">
          <option *ngFor="let country of country; let i = index" value="{{i}}">{{country.name}}</option>
        </select>
      </div>


      <div class="form-group">
        <button type="submit" (click)="Save()" [disabled]="!postForm.valid" class="btn btn-success">Submit</button>
      </div>
    </form>
  </div>
</div>

Answer 6

使用：

<form (keydown.enter)="$event.preventDefault()" (keydown.shift.enter)="$event.preventDefault()"></form>

它会阻止标签和标签中的内容提交 enter 和 shift + enter.

例如：它对我有用：

<div name = "example" (keydown.shift.enter)="$event.preventDefault()" (keydown.enter)="$event.preventDefault()" ...

在此之后，此示例 div 下的所有内容都无法提交 enter 和 shift + enter.

有关组合键的更多信息： https://alligator.io/angular/binding-keyup-keydown-events/#key-combinations

Answer 7

这对我有帮助：

必须作为提交按钮的按钮应该是type="button"
那个按钮应该有 (click)="onSubmit()" <- 将被调用的方法
你可以从中删除 (ngSubmit)="onSubmit()" <form [formGroup]="form" (ngSubmit)="onSubmit()">

我不确定从表单中删除 (ngSubmit) 是否有副作用。顺便说一句：我观察到

<form (keydown.enter)="$event.preventDefault()" (keydown.shift.enter)="$event.preventDefault()"></form>

已禁用自定义验证器。

Answer 8

Angular 6.x+ 要防止输入任何特定输入，请执行以下操作：

<input type="text" (keydown)="$event.keyCode == 13 ? $event.preventDefault() : null">

Answer 9

Angular 10

$event.preventDefault() 对我不起作用 - $event.stopPropagation 对我有用。

Angular 2 防止enter在模板驱动的表单中提交

Angular 2 prevent enter from submitting in template-driven form

angular2-forms

angular