当在Angular 4中触发输入上的(keyup.enter)时，请预防(ngsubmit)

Question

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

所以问题是我在此输入元素上添加了一个(keyup.ente(事件，但它触发了(ngsubmit(。

我尝试在(keyup.enter(上添加event.stoppropagation，但它没有工作。

Answer 1

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

app.component.html

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

app.component.ts

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

demo

Answer 2

您可以尝试此

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