Question

是否可能有一个带有某种形式的组件，而该组件可以以其功能不影响外部形式的另一种形式使用？

我有一个用于重置密码的组件，由一个带有一些密码输入的表单组成。它已在应用程序中的几个地方重用，其中一个位于页面上，用户可以在其中编辑个人资料，这也是一种形式。在这种情况下，当有人尝试更改组件中的密码时，将提交用户配置文件的外部表单。理想情况下，我只希望在用户位于密码组件中时提交密码表单，并且仅在用户点击用户个人资料表单上的提交时才提交用户个人资料表单。

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

Answer 1

这在语义上不是很好，但是可以。感谢您向正确方向布兰登的指示。来自内部表单（在嵌套组件中）的表单标签需要删除。它无法再与submit事件一起提交，因此我们需要另一种方式来实现。

内部表单的提交按钮应更改为type="button"，以确保它不会触发任何提交事件，并且该操作现在应绑定到click事件。为了使其具有与适当格式相同的行为，我们还需要能够在按Enter时“提交”它。这可以通过绑定到keydown事件来完成。

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

内部组件中的onKeyDown函数检查是否按下了回车按钮。如果是这样，它将执行提交通常会执行的操作。它还需要防止阻止外部表单提交的默认操作。如果按下了其他键，则不需要任何特殊操作。

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

然后，此内部组件可以安全地用于其他组件，并且无论是否使用表单都没关系。

隔离内部形式

1 个答案: