angular - 角材料步进样式

Question

嗨，我想像给定的图像一样自定义现有的角度材料步进器 ui。是否可以以编程方式更改图标，如果出现错误，则应显示红色的错误图标

https://stackblitz.com/edit/angular-4rvy2s-sprtoe?file=app/stepper-overview-example.ts

标签： angularangular-materialmaterial-designmat-stepper

Answer 1

根据您的描述，这两种情况都是可能的，官方文档中有示例

1.自定义图标：

为了使用自定义步进状态，您必须将 displayDefaultIndicatorType 选项添加到全局默认步进器选项中，可以通过在应用程序的根模块中为 STEPPER_GLOBAL_OPTIONS 提供值来指定该选项。

Soruce + 示例：https ://material.angular.io/components/stepper/overview#step-states

2.错误状态：

如果您想在用户经过未正确填写的步骤时显示错误，您可以通过 errorMessage 输入设置错误消息，并通过 STEPPER_GLOBAL_OPTIONS 注入令牌中的 showError 选项配置步进器以显示错误。

来源+示例：https ://material.angular.io/components/stepper/overview#error-state