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>

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

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

Answer 3

我知道我迟到了，但可能是我得到了适当的解决方案，

如果您使用＆lt; button＆gt;然后只需定义

<button type="button">

而不是定义它或将其定义为type =“submit” 因为如果你没有定义它，它会提交你的表格。

如果您使用的是<input>，那么也可以定义

<input type="button">

这将有效。

- 编辑为@Chrillewoodz 评论。

如果您希望在提交/点击时执行某些特定过程您可以将点击事件添加到按钮，并且您可以随意执行任何操作。

如果您想在角度ts文件中使用Form标记，则可以使用@ViewChild。

Answer 4

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

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

Answer 5

这对我有帮助：

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

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

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

已禁用自定义验证器。

Answer 6

角度 10

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

Answer 7

角度：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 8

使用：

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

这将防止标签及其中的内容提交输入和 shift +输入。

例如：它为我工作了：

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

然后，此示例div下的所有内容均无法提交输入和 shift +输入。

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

Answer 9

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

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

Angular 2阻止输入以模板驱动的形式提交

9 个答案: