如何显示垫式踏步机中的最后一个垫式踏步已完成? [英] How to show that the last mat-step is complete in mat-stepper?

问题描述

好的.我不敢相信我是第一次发布关于应该很容易实现的问题的信息，但是我们就在这里.

Okay. I can't believe that I'm posting a question for the first time over something that should be so simple to accomplish, but here we are.

我希望水平单击垫中的最后一步是单击特定按钮后显示选中标记图标和绿色背景，就像之前的步骤的图标一样.该按钮将是下图中的是，确认"按钮.

I would like for the final step in my mat-horizontal-stepper to display a checkmark icon and green background once a specific button is clicked, just like the icons for the steps prior to it. That button would be the 'Yes, confirm' button in the following image.

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

Once clicked, I would like the blue icon with the number three to change into the checkmark icon that I previously described, indicating that all steps are now completed. Steps 1 & 2 do it automatically because it seems as if the 'mat-step-icon-state-done' class gets applied to them once a button marked as 'matStepperNext' is pressed. Sadly, Step 3 does not have such a button, so it must be done manually.

现在，我已经尝试过所有与此相关的搜索.许多帖子建议使用 <ng-template></ng-template> ，但这没有用.其他人建议使用 <代码> completed = true;editable = false; ，但这也仅在进行下一步时有效，这意味着它不适用于最后一步.我的假设是，必须以某种方式将"mat-step-icon-state-done"类添加到mat-icon中，但是我不确定如何做到这一点.另外，如果我的直觉完全消失了，请随时将我指向正确的方向.

Now, I've tried everything that would come up for a search regarding this. Many posts suggest using custom icons with states using <ng-template></ng-template>, but that has not worked. Others have suggested marking the step with completed=true; editable=false;, but this only works when moving to the next step as well, which means it won't apply to the final step. My hypothesis is that there must be some way to add the 'mat-step-icon-state-done' class to the mat-icon somehow, but I'm not really sure how to go about doing that. Also, please feel free to point me in the correct direction if my hunch is completely off.

推荐答案

根据文档，似乎没有直接的方法.有一个 completed 和 state 输入，尽管我们可以在最终的 mat-step 中使用它.

There doesn't seem to be a direct way to do this as per the docs. There is a completed and state input though which we can use on the final mat-step.

如果您在stepper 的代码"rel ="nofollow noreferrer"> GitHub ，您可以看到以下情况

If you see the code for the stepper on GitHub, you can see the following condition

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 .

This shows that setting completed alone is not sufficient since the final step will still be the current step. But as we can see from the condition, all we need to do now is change state as well.

在最后一个 mat-step 中，添加 completed 和 state

In your last mat-step, add completed and 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>

然后在单击按钮时在您的组件中对其进行控制.

Then control this in your component when the button is clicked.

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 上的有效示例.

这篇关于如何显示垫式踏步机中的最后一个垫式踏步已完成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！