Question

外部表格：

<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或其他东西实现这一目标，但我不知道如何实现这一目标。

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

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

1 个答案:

父组件

子组件