Angular 10中Mat水平步进器如何跨组件校验表单阻止未填必填项跳步

问题背景 #

• 项目使用mat-horizontal-stepper实现横向分步流程，每个步骤块嵌套独立的业务子组件
• 第一步的必填表单step1Form定义在app-step1子组件内部，步进器所在的父组件TS逻辑无法直接读取子组件的表单校验状态
• 目前仅在子组件内部实现了下一步按钮的禁用逻辑，用户点击步进器头部的步骤标签时可绕过校验直接跨步骤跳转
• 目标是在所有必填项未填写完成时，完全阻断步进器的非法跳转行为

具体实现步骤 #

1. 子组件对外暴露表单校验状态 #

在承载step1Form的app-step1组件中，新增只读方法把当前表单的有效性返回给外部调用方：

// step1.component.ts
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-step1',
  // 组件元数据配置省略
})
export class Step1Component {
  // 原有逻辑：定义第一步的响应式表单
  step1Form: FormGroup;

  // 对外暴露当前表单的有效状态
  get isStep1FormValid(): boolean {
    return this.step1Form?.valid;
  }
}

2. 父组件绑定子组件实例引用 #

在步进器所在的父组件TS文件中，引入对应子组件类，通过视图装饰器拿到子组件的运行时实例：

// 步进器宿主组件.ts
import { ViewChild } from '@angular/core';
import { Step1Component } from './step1/step1.component';

@Component({
  selector: 'app-profile-stepper',
  // 组件元数据配置省略
})
export class ProfileStepperComponent {
  // 拿到模板中app-step1的组件实例
  @ViewChild(Step1Component) step1Comp: Step1Component;
  // 绑定模板中#stepper的步进器实例
  @ViewChild('stepper') stepper;

  // 原有逻辑：接收子组件的消息更新事件
  receiveUpdateMessage(event) {
    // 原有处理逻辑省略
  }
}

3. 给步进步骤绑定完成态校验规则 #

修改步进器的HTML模板，给需要校验的步骤绑定completed属性，该属性的值决定步进器是否允许从当前步骤跳转出去：

<mat-horizontal-stepper 
  #stepper 
  *ngIf="profile"
  linear
>
  <!-- 第一步：绑定表单校验结果，表单有效时才标记为完成 -->
  <mat-step [completed]="step1Comp?.isStep1FormValid">
    <div class="mt-20">
      <app-step1 
        [profile]="profile" 
        (messageUpdateEvent)="receiveUpdateMessage($event)"
      ></app-step1>
    </div>
  </mat-step>

  <mat-step>
    <div class="mt-20">
      <app-step3 
        [profile]="profile" 
        (messageUpdateEvent)="receiveUpdateMessage($event)"
      ></app-step3>
    </div>
  </mat-step>

  <mat-step>
    <div class="mt-20">
      <app-step4 
        [profile]="profile" 
        (messageUpdateEvent)="receiveUpdateMessage($event)"
      ></app-step4>
    </div>
  </mat-step>
</mat-horizontal-stepper>

模板中使用可选链?.是为了避免子组件尚未初始化完成时出现空值报错。当第一步表单未填写完成时，completed返回false，步进器会自动拦截跳转动作。
给步进器添加的linear属性是关键配置：linear 模式会自动拦截所有未完成步骤的跨级跳转操作，强制用户按顺序完成步骤，禁止用户点击未完成的步骤标签直接跳转，只有当前步骤标记为完成时，才允许激活后续步骤。

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