在 Angular 4 中触发（keyup.enter）输入时阻止（ngSubmit）答案

【问题标题】：Prevent (ngSubmit) when (keyup.enter) on an input is triggered in Angular 4在 Angular 4 中触发（keyup.enter）输入时阻止（ngSubmit）
【发布时间】：2018-03-28 06:45:26
【问题描述】：

在这里，我有一个包含许多输入的表单。其中之一不是表单构建器的一部分。我正在使用它来创建一些自定义数据。

所以问题是我在这个输入元素上添加了一个 (keyup.ente) 事件，但它触发了表单上的 (ngSubmit)。

我尝试在 (keyup.enter) 上添加 event.stopPropagation，但由于某种原因它不起作用。

【问题讨论】：

在 plunk.co 或stackblitz.com分享您的代码
查看示例代码stackblitz.com/edit/angular-z5qxkb。它甚至没有触发（keyup.enter）。

标签： javascript html angular typescript

【解决方案1】：

问题是<form> 在<input> 之前处理keydown 事件，因此您应该在<input> 上使用keydown.enter。此外，您应该使用event.preventDefault() 阻止事件到达<form>（并触发submit-事件）。

app.component.html

<form (ngSubmit)="onSubmit">
  ...
  <input (keydown.enter)="handleKeyEnter($event)">
</form>

app.component.ts

handleKeyEnter(event) {
  event.preventDefault();
  ...
}

demo

【讨论】：

【解决方案2】：

你可以试试this

app.component.html

<form [formGroup]="form" (ngSubmit)="onSubmit($event)" (keydown)="handleKeyupEnter($event)">
  <input type="text" [formControl]="form.controls['name']" placeholder="Name">
<br><br>
  <input type="text" placeholder="data" #entry >

  <br><br>
  <button type="submit">Submit</button>
</form>

app.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) { }

  @ViewChild('entry') entry: ElementRef;

  ngOnInit() {
    this.form = this.fb.group({
      name: ''
    })
  }

  onSubmit(e) {
    alert('Form Submitted');
    console.log(e);
  }

  handleKeyupEnter(event, value) {
    console.log(event)
    if(event.code=="Enter")
    event.preventDefault();

  }
}

如果您需要从这种行为中排除特定的孩子（例如您的数据输入），请检查 event.target 和 event.srcElement

【讨论】：