如何创建可复用Angular Material Stepper表单组件并规避严格模式报错

核心原因 #

NG0100错误源于变更检测周期内，子组件内部表单的有效性状态更新时机晚于父组件（Mat Step）对completed状态的检测，导致父组件表达式在检测后发生变化。以下是不依赖手动变更检测、封装内部表单的可行方案：

方案1：用Angular 16 Signals管理状态（推荐） #

Signals是Angular原生响应式状态方案，能自动同步状态更新与变更检测，从根源避免时序问题。

// insured-form.component.ts
import { Component, signal, computed } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatFormFieldModule, MatInputModule } from '@angular/material/input';
import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-insured-form',
  template: `
    <form [formGroup]="insuredForm">
      <mat-form-field>
        <input matInput formControlName="fullName" placeholder="全名" required>
      </mat-form-field>
      <mat-form-field>
        <input matInput formControlName="address" placeholder="地址" required>
      </mat-form-field>
    </form>
  `,
  standalone: true,
  imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule]
})
export class InsuredFormComponent {
  insuredForm: FormGroup;
  private formValid = signal(false);
  // 供父组件Mat Step绑定的计算属性，自动跟踪状态变化
  isCompleted = computed(() => this.formValid());

  constructor(private fb: FormBuilder) {
    // strict模式下优先在构造函数创建表单，时机更早
    this.insuredForm = this.fb.group({
      fullName: ['', Validators.required],
      address: ['', Validators.required]
    });

    // 订阅表单状态，更新Signal
    this.insuredForm.statusChanges.subscribe(status => {
      this.formValid.set(status === 'VALID');
    });
  }
}

父组件中直接绑定Signal到Mat Step：

<!-- parent-stepper.component.html -->
<mat-stepper linear>
  <mat-step [completed]="insuredFormComp.isCompleted()">
    <ng-template matStepLabel>投保人信息</ng-template>
    <app-insured-form #insuredFormComp></app-insured-form>
    <button mat-button matStepperNext>下一步</button>
  </mat-step>
  <!-- 其他步骤 -->
</mat-stepper>

方案2：异步调度状态更新（无Signals适配） #

若暂不使用Signals，可利用异步调度将状态更新推迟到当前变更检测周期之后，无需手动触发变更检测。

// insured-form.component.ts
import { Component, AfterViewInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { asyncScheduler } from 'rxjs';

@Component({
  selector: 'app-insured-form',
  template: `<!-- 同方案1模板 -->`
})
export class InsuredFormComponent implements AfterViewInit {
  insuredForm: FormGroup;
  isCompleted = false;

  constructor(private fb: FormBuilder) {
    this.insuredForm = this.fb.group({
      fullName: ['', Validators.required],
      address: ['', Validators.required]
    });
  }

  ngAfterViewInit(): void {
    // 用asyncScheduler将状态更新放到下一个微任务，避开当前检测周期
    this.insuredForm.statusChanges.subscribe(status => {
      asyncScheduler.schedule(() => {
        this.isCompleted = status === 'VALID';
      });
    });
  }
}

关键注意事项 #

• 禁止在ngOnInit中直接修改父组件依赖的状态（如isCompleted），该钩子处于变更检测周期内，易触发时序冲突。
• strict模式下优先在构造函数创建表单，避免初始化阶段的状态不一致。
• 全程无需调用ChangeDetectorRef.detectChanges()，依赖Angular原生变更检测机制即可符合strict模式要求。

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