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

Question

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

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

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

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

标签： angularangular-materialmat-stepper

Answer 1

根据文档，似乎没有直接的方法可以做到这一点。我们可以在 final 上使用一个completedand输入。statemat-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上的一个工作示例。