Angular 2防止组件内部的输入触发组件外部的表单提交答案

【问题标题】：Angular 2 prevent input inside component from firing form submit outside of the componentAngular 2防止组件内部的输入触发组件外部的表单提交
【发布时间】：2017-03-27 05:30:24
【问题描述】：

外部形式：

<form #myForm="ngForm" (ngSubmit)="save(myForm.value, myForm.isValid)">
  <tags-input></tags-input>
</form>

标签输入组件模板：

<input type="text" [(ngModel)]="newTag" (keyup.enter)="addTag(newTag, $event)">

标签输入组件：

addTag(newTag: any, e: any) {

  e.stopPropagation();
  e.preventDefault();
}

尽管如此，它仍然会在外部表单中触发提交。

当我在组件内的输入中按回车时，如何防止表单提交？

我在想一定有办法通过EventEmitter 或其他东西来实现这一点，但我不知道怎么做。

【问题讨论】：

尝试将keyup改为keydown
@yurzui 那也不行。我发现只要在表单中添加标签输入组件，整个表单提交就会停止工作。就像组件接管了整个表单，因为我不能再在组件之外提交它了。

标签： angular typescript angular2-forms

【解决方案1】：

阻止keyup事件不会阻止表单的提交事件。解决它的一种方法是在父组件上提出一个标志。比如：

父组件

<form #myForm="ngForm" (ngSubmit)="save(myForm.value, myForm.isValid)">
  <tags-input (enter)="onEnter()"></tags-input>
</form>

onEnter() {
  this.preventSave = true;
}

save() {
  if (!this.preventSave) {
    // do save
  }
}

子组件

@Output() enter = new EventEmitter();

addTag(newTag: any, e: any) {
  this.enter.emit();
  e.stopPropagation();
  e.preventDefault();
}

【讨论】：