如何在 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

根据文档似乎没有直接的方法来做到这一点。有一个completedandstate输入，我们可以在最终的mat-step.

stepper如果你在GitHub上看到 的代码，你可以看到以下情况

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上的一个工作示例。