多标签用户注册表单angular 8

Multi tab user registration form angular 8

我正在使用 angular 8 和 ng-bootstrap 进行开发。我想要一个包含多个选项卡的用户注册表。我怎样才能在不改变我的 url 模式的情况下实现这一点,或者你可以说在选项卡之间悬停时它不应该路由到另一个 url 左右。这是我想通过上一个和下一个按钮以及最后一个选项卡上的提交按钮实现的。请帮忙。如需参考,请单击提供的图像。提前致谢 reference form image

如果我正确解释了你的问题,这似乎很简单。

  1. 使用 Nav instead of Tabset 因为 ng-bootstrap 已弃用 6.0 版本以上的标签集。

  2. 使用 activeId 输入在 NgbNav Api 中公开,以更改单击 Next[=38= 时的当前活动选项卡] 或 上一个 按钮。我使用变量 active 来跟踪它。

  3. 在 ts 文件中添加一些 corner case 逻辑,以免超出或削弱范围。 (取决于您的表单中的段数)

  4. 根据active更改最后一个下一个按钮的最后标签。

Working Stackblitz