问题标签 [mat-stepper]

我有 2 - 4 步表格。我已经分离出如下结构的表格。首先是auth文件夹，然后是文件register夹。在这register-register.ts和register.html。在register.html我实施mat stepper如下：

根据我的register.ts：

现在这 <kt-stepone>是我的第 1 步表单，它是单独的模块，我在那里实现了下一步按钮。

现在，当我实施时isLinear = true;，即使在填写了整个表格之后，它也不会继续下一步。如果我没有填写表格，那么它会按预期工作，用红色突出显示文件

对于参考，这里是<kt-stepone>代码：

由于我是第一次使用角度，请告诉我在这种方法中我在哪里犯了错误。

更新了 KT-STEPONE.ts：

我相当复杂的 Stackblitz

通常，当我在响应式表单中进行复杂的验证时，我会为那些相互依赖的控件定义一个 formGroup。

这在上面的 senario 中是不可能的，我们有3 steps = 3 groups和依赖的 3 个字段firstUnique, secondUnique, thirdUnique。

我使用描述的技术SO_answer和Material_docs

到目前为止，我的解决方案正在运行，但我对此并不满意：

1. 启动Unique Validation时运行一千次（30-40 次）（hacky）
2. 在整个步进器中任何输入的每次更改都会触发。（这是因为我必须将它添加到整个 formGroup）。Unique Validation

3. 一个简单的任务，因为这 3 个输入字段需要是唯一的，这已经成为一个样板和复杂的混乱。（请注意function Unique(arr: string[])）

4. 当正确的步骤被UNIQUE Validator或 STEP 再次有效时，不会调用 STEPPER-VALIDATION。（例如：firstUnique = “a”，secondUnique “b”，thirdUnique = “a”（再次））

我的表格

独特的验证者乐趣

告诉我如何更改 MatHorizo​​ntalStepper 组件的标准过渡动画。

我尝试使用

但没有任何改变

也许我应该更改模板中的某些内容，但是在哪里

我在每个步骤中都使用带有动态表单的步进器。我已经为返回和下一步按钮创建了方法，我在单击下一步和返回按钮时调用它们，如下所示：

现在我还想在用户单击标题导航时前后移动，所以我也为此创建了一个方法：

在 onNavChange(event) 内部。我根据步骤名称调用方法 next 或 sub 。

问题是，当我单击下一个按钮时，它会被调用两次......首先它调用 onNavChange($event) 然后调用下一个按钮的方法。

我怎样才能确保它只被调用一次？有没有办法让 onNavChange() 仅在单击标题时才执行？

我的应用程序中有一个材料垂直步进器，它显示在引导模式中。我在 mat-vertical-stepper 中使用 (selectionChange) 指令来跟踪 onchange 事件。但它最初不会被触发。我的步进数据是动态的，步骤是根据 db 值列出的。我需要在垫子步进器加载时执行一个函数，这需要执行一次。请提供任何帮助。

我正在使用一个简单的 mat-stepper，其中步骤是使用*ngFor.

我想在渲染步进器后动态地向显示器添加一个步骤，然后立即以编程方式导航到它。

动态添加步骤可以正常工作 - 导航部分是问题，因为它会导致异常：“错误：cdkStepper：无法将超出范围的值分配给selectedIndex”，即使分配的索引应该在基于步骤的范围内传递给组件。

用于说明问题的简化示例（超时只是导致添加额外步骤的异步行为的占位符）。

关于我们如何解决这个问题的任何想法？

完整示例：https ://stackblitz.com/edit/angular-cdafd9?file=app%2Fstepper-overview-example.ts

好的。我不敢相信我第一次就应该如此简单地完成的事情发布问题，但我们到了。

单击特定按钮后，我希望 mat-h​​orizo​​ntal-stepper 的最后一步显示一个复选标记图标和绿色背景，就像之前步骤的图标一样。该按钮将是下图中的“是，确认”按钮。

单击后，我希望带有数字 3 的蓝色图标变为我之前描述的复选标记图标，表示现在所有步骤都已完成。步骤 1 和 2 会自动执行，因为一旦按下标记为“matStepperNext”的按钮，似乎“mat-step-icon-state-done”类就会应用于它们。遗憾的是，第 3 步没有这样的按钮，所以必须手动完成。

现在，我已经尝试了所有可以搜索的内容。许多帖子建议使用状态为 using 的自定义图标<ng-template></ng-template>，但这没有奏效。其他人建议用 标记该步骤completed=true; editable=false;，但这仅在移动到下一步时也有效，这意味着它不适用于最后一步。我的假设是必须有某种方法以某种方式将“mat-step-icon-state-done”类添加到 mat-icon，但我不确定如何去做。另外，如果我的预感完全消失，请随时为我指出正确的方向。

我对选定的内容使用以下 css mat-step：

它工作正常，但我需要更改蓝色的：

试过：

但这也改变了 4,5 和 6 步骤，我只需要改变 1 和 2。

关于如何解决这个问题的任何想法？谢谢！

我想在我的应用程序中实现一个垂直步进器，但找不到任何以“全部折叠”状态开始的方法。目标是用户可以在单击步骤并开始填充或编辑数据之前在屏幕上看到整个折叠的步骤列表。这是否有可能，或者是否有一种解决方法可以用来实现这一点？

vertical line是否可以在最后一步扩展？

模板脚本阻止它：

这就是它现在在最后一步中的样子：

这是期望的：

感谢您的任何建议。