javascript - 如何使用 Angular 将按钮与表单关联起来？

Question

我正在使用 Angular 6.x，我想将位于 DOm 中表单外部的提交按钮与其关联。也就是说，我想完成结构上与此等效的事情:

<button type='submit' form='myform'>
  click me!
</button>

<form id='myform' action='#' onsubmit='console.log("wheee")'>
  <input type='submit' value='me too'/>
</form>

即我想处理表单元素中的 submit 事件。

有没有办法在不通过 nativeElement 或不移动/复制按钮单击事件上的提交处理程序的情况下执行此操作？

Answer 1

You can achieve by reference #form of form and passing the same reference to button.

<button type='button' (click)="form.onsubmit()">
  click me!
</button>

<form id='myform' #form action='#' onsubmit='console.log("wheee")'>
  <input type='submit' value='me too'/>
</form>

工作副本在这里 - https://stackblitz.com/edit/angular-pnneks