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

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

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

如果你正在使用那么只需定义

<button type="button">

而不是定义它或将其定义为type ="submit",因为如果你没有定义它,它将提交你的表单.

如果你正在使用那么同样也定义

<input type="button"> 

这将有效.

- 编辑为@Chrillewoodz评论.

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

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

Answer 4

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

用：

<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