Angular 孤立内部形式

是否可能有一个组件，其上有一个表单，可以在其功能不影响外部表单的另一个表单中使用

我有一个用于重置密码的组件，它由一个带有一些密码输入的表单组成。它在应用程序中的一些地方被重用，其中之一是在页面上，用户可以编辑他们的个人资料，这也是一个表单。在这种情况下，当有人试图更改组件中的密码时，将提交用户配置文件的外部表单。理想情况下，如果用户在密码组件中，我只想提交密码表单，如果用户点击用户配置文件表单上的提交，我只想提交用户配置文件表单

---

鉴于嵌套表单不是有效的HTML，我是否需要重新考虑如何设置它，并确保表单中没有包含表单的组件？

这在语义上不是很好，但很有效。谢谢你给我的指示，布兰登。需要删除内部表单（嵌套组件中）的表单标记。它不能再与

submit

事件一起提交，因此我们需要另一种方式来完成

内部表单提交按钮应更改为

type=“button”

，以确保它不会触发任何提交事件，并且该操作现在应绑定到单击事件。为了使它以与正确表单相同的方式运行，我们还需要能够在按enter键时“提交”它。这可以通过绑定到keydown事件来完成

<input type="password" (keydown)="onKeyDown($event)" #passwordInput>
<button type="button" (click)="onResetPassword()">Reset</button>

---

这样，这个内部组件就可以安全地用于其他组件中，而不管它是否用于表单。

请记住，实际上并不需要表单标签来封装表单输入。您可以很容易地在另一个组件中使用一个单独的FormGroup实例来隔离该功能，而不会影响外部组件。如果我还更改了密码（内部）表单的提交方式，则删除表单标记似乎是可行的。我没有将操作绑定到submit事件，而是绑定到change password按钮上的click事件，并将其类型更改为

按钮

，而不是

提交

。但是，如果用户在内部组件上输入数据后按enter键，则仍会提交外部表单。考虑到内部组件不知道外部形式，或者即使存在外部形式，是否有办法防止这种情况发生？是的。您还需要更改外部表单的结构，以便不包含表单标记，或者更改事件处理。这肯定不是最优雅的解决方案。

onKeyDown (event: KeyboardEvent) {
  if (event.keyCode === 13) {
    this.onResetPassword() // This used to be bound to submit.
    event.preventDefault()
  }
}