Angular 2阻止Enter以模板驱动形式提交

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

<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必须已经内置了类似的东西，但我找不到。

如果没有，实现此目标的最佳方法是什么？

事实证明，您可以使用以下简单方法：

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

为了防止表单在ENTER上提交。

我知道我迟到了，但也许我可以为此找到适当的解决方案，

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

<button type="button">

而不是定义它或将其定义为type =“ submit”，因为如果不定义它，它将提交您的表单。

如果使用相同，<input>则还定义

<input type="button"> 

这将起作用。

-编辑为@Chrillewoodz评论。

如果您希望对提交/单击执行某些特定处理，则可以将click事件添加到按钮，从而可以执行您想要的任何操作。

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

要允许Enter键在文本区域中起作用但阻止提交表单，可以进行如下修改：

在HTML模板中：

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

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

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

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

采用：

<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

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

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

这就是帮助我的原因：

• 充当提交按钮的按钮应该是 type="button"
• 该按钮应具有(click)="onSubmit()"<-将被调用的方法
• 你可以删除，即(ngSubmit)="onSubmit()"从 <form [formGroup]="form" (ngSubmit)="onSubmit()">

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

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

禁用了自定义验证器。

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

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