Javascript 在角度4中触发输入（keyup.enter）时防止（ngSubmit）

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

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

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

问题是

在

之前处理

键下事件，因此您应该在
上使用
键下。请改为在
上输入
。此外，您应该使用
event.preventDefault（）
来阻止事件到达
（并触发
提交
-事件）

app.component.html

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

你可以试试

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>

如果需要从该行为中排除特定的子项（如数据输入），请检查
event.target
&
event.srcElement
在plunk.co上共享代码或检查示例代码。有时它甚至不会触发（keyup.enter）。
<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>

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();

  }
}