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

Question

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

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

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

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

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);
}

注意：您可以使用表单的有效性来有条件地设置这两个变量或显示错误消息以提示用户完成其余的步进器。

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