如何自定义Angular Material Stepper样式并动态切换错误状态图标

完全可以通过编程方式控制步进器图标，实现报错时显示红色错误图标的需求，具体实现步骤如下：

步骤1：声明自定义图标模板 #

在<mat-horizontal-stepper>或<mat-vertical-stepper>标签内部，使用ng-template配合matStepperIcon指令定义不同状态对应的图标，错误状态的图标直接设置红色样式即可：

<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <!-- 错误状态自定义图标 -->
  <ng-template matStepperIcon="error">
    <mat-icon style="color: #f44336;">error</mat-icon>
  </ng-template>
  <!-- 可按需自定义编辑、完成状态的图标，不需要则省略沿用默认样式 -->
  <ng-template matStepperIcon="edit">
    <mat-icon>edit</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="done">
    <mat-icon>check_circle</mat-icon>
  </ng-template>

  <!-- 步骤1 -->
  <mat-step [stepControl]="firstForm" [errorState]="firstStepInvalid">
    <ng-template matStepLabel>基础信息填写</ng-template>
    <!-- 步骤表单内容 -->
  </mat-step>

  <!-- 步骤2 -->
  <mat-step [stepControl]="secondForm" [errorState]="secondStepInvalid">
    <ng-template matStepLabel>附加信息填写</ng-template>
    <!-- 步骤表单内容 -->
  </mat-step>
</mat-horizontal-stepper>

步骤2：控制错误状态变量 #

在组件类中为每个步骤声明错误状态布尔变量，通过监听表单校验状态或者业务逻辑结果更新变量值即可：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-stepper-demo',
  templateUrl: './stepper-demo.component.html',
  styleUrls: ['./stepper-demo.component.css']
})
export class StepperDemoComponent implements OnInit {
  firstForm: FormGroup;
  secondForm: FormGroup;
  isLinear = true;
  // 步骤错误状态变量
  firstStepInvalid = false;
  secondStepInvalid = false;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.firstForm = this.fb.group({
      name: ['', Validators.required],
      phone: ['', [Validators.required, Validators.pattern(/^1[3-9]\d{9}$/)]]
    });
    this.secondForm = this.fb.group({
      address: ['', Validators.required]
    });

    // 监听表单状态变化自动更新错误状态
    this.firstForm.statusChanges.subscribe(status => {
      this.firstStepInvalid = status === 'INVALID';
    });
    this.secondForm.statusChanges.subscribe(status => {
      this.secondStepInvalid = status === 'INVALID';
    });
  }
}

额外说明 #

• 自定义图标可替换为任意自定义元素，比如本地svg、图片资源、自定义组件都可直接放入ng-template中
• 无需额外修改全局样式，以上配置即可生效，适配水平、垂直两种步进器样式
• 若仅需要错误状态自定义，其余状态的图标模板可直接省略，自动沿用Angular Material默认样式

内容的提问来源于stack exchange，提问作者Ajith