如何在 mat-stepper 中显示最后一个 mat-step 已完成？

Question

好的。我不敢相信这是我第一次针对本应如此简单的事情发布问题，但我们到了。

我希望我的 mat-horizontal-stepper 的最后一步在单击特定按钮后显示复选标记图标和绿色背景，就像之前步骤的图标一样。该按钮将是下图中的 'Yes, confirm' 按钮。

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

现在，我已经尝试了与此相关的所有搜索结果。许多帖子建议使用带有 <ng-template></ng-template>, but that has not worked. Others have suggested marking the step with completed=true; editable=false; 状态的自定义图标，但这也仅在移动到下一步时有效，这意味着它不适用于最后一步。我的假设是必须有某种方法可以以某种方式将 'mat-step-icon-state-done' class 添加到垫子图标，但我不太确定如何去做。另外，如果我的预感完全错误，请随时为我指出正确的方向。

Answer 1

根据文档，似乎没有直接的方法来执行此操作。有一个 completed 和 state 输入，我们可以在最终 mat-step.

上使用它们

如果您在 GitHub 上看到 stepper 的代码，您可以看到以下条件

if (step._showError && step.hasError && !isCurrentStep) {
    return STEP_STATE.ERROR;
} else if (step.completed && !isCurrentStep) {
    return STEP_STATE.DONE;
} else if (step.completed && isCurrentStep) {
    return state;
}

这表明仅设置 completed 是不够的，因为最后一步仍将是当前步骤。但是从条件可以看出，我们现在需要做的就是也改变state。

在您的上一个 mat-step 中，添加 completed 和 state

<mat-step [completed]="completed" [state]="state">
    <ng-template matStepLabel>Done</ng-template>
        You are now done.
    <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button (click)="done()">Confirm</button>
    </div>
</mat-step>

然后在单击按钮时在您的组件中控制它。

completed: boolean = false;
state: string;

done() {
    this.completed = true;
    this.state = 'done';
    console.log(this.firstFormGroup.valid);
    console.log(this.secondFormGroup.valid);
}

Note: You can use the validity of the forms to conditionally set these two variables or show an error message to prompt the user to complete the rest of the steppers.

这是 StackBlitz 上的一个工作示例。

如何在 mat-stepper 中显示最后一个 mat-step 已完成？

How to show that the last mat-step is complete in mat-stepper?

angular-material

angular

mat-stepper