如何在 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。 然而，用戶也可以通過根據需要設置完成屬性來覆蓋這個默認的完成行為。