如何在 Angular Material Stepper 中禁用一个步骤？

Question

我在 Angular Material 水平步进器中有 3 个步骤。 我想默认启用前 2 步，但禁用 3 步（但不隐藏）。

这些步骤不必具有决定当前步骤是否有效的表单值。 有一系列后端调用决定当前步骤是否有效。 线性模式选项看起来可以工作，但它似乎依赖于它们是具有所需值的表单，以确定表单是否有效。 我没有表格，但仍然想要相同类型的功能。 有任何想法吗？

Answer 1

您无需使用表格即可使用步进器。 请注意线性步进器上“ 角度材料”文档中的以下内容：

另外，如果您不想使用Angular表单，则可以将completed属性传递给每个步骤，这些步骤将不允许用户继续操作直到它变为true。

没有表单，您只需要使用自己的逻辑和步进功能来实现状态等。

Answer 2

为此，您可以禁用mat-stepper-header导航。

并使用click event向前迈进。

要禁用mat-stepper-header导航，请使用此CSS

.mat-step-header {
                pointer-events: none !important;
     }

这绝对好用。

谢谢

Answer 3

我需要停止上一个已完成步骤的更改

Answer 4

使用 Completed Stepp，使用任何条件将其设置为true或false ，这是 Material Angular 中的信息

完成步骤
默认情况下，如果步骤有效（在线性步进器的情况下）并且用户已与步骤交互，则步骤的完成属性返回 true。 然而，用户也可以通过根据需要设置完成属性来覆盖这个默认的完成行为。