Question

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

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

我尝试在（keyup.enter）上添加event.stopPropagation但是它没有工作原因。

Answer 1

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

<强> app.component.html

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

<强> app.component.ts

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

demo

Answer 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＆amp; event.srcElement

防止（ngSubmit）何时在Angular 4中触发输入（keyup.enter）

2 个答案: