如何禁用Angular Material Stepper中的步骤?

时间:2018-05-25 17:54:08

标签: javascript angular typescript angular-material

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

这些步骤不一定具有表单值,用于确定当前步骤是否有效。发生了一系列后端调用,这些调用决定当前步骤是否有效。线性模式选项看起来会起作用,但它似乎依赖于它们是一个具有所需值的表单,以确定表单是否有效。我没有表格但仍想要相同类型的功能。有什么想法吗?

https://stackblitz.com/angular/dqllekdmmly?file=app%2Fstepper-overview-example.ts

2 个答案:

答案 0 :(得分:1)

您不必使用表单来使用步进器。请注意线性步进器上Angular Material documentation的以下内容:

  

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

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

答案 1 :(得分:0)

要实现此目的,您可以禁用mat-stepper-header导航。

并使用click事件来前进。

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

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

这绝对好用。

谢谢