Angular 18 无Zone模式下自定义mat-error组件失效问题

问题根源 #

无Zone模式下，Angular不再通过Zone.js捕获异步操作（如表单控件的状态变更）。原组件直接通过field().hasError()访问控件错误状态，但控件内部状态变化不会触发输入信号field的更新，导致OnPush模式的组件无法感知变化、触发变更检测，最终错误信息不更新。

解决方案：将表单控件状态转为Angular信号 #

通过toSignal操作符把表单控件的statusChanges流转换为Angular信号，让组件能自动响应控件状态变化，触发变更检测。

修改后的组件代码

import { Component, input, ChangeDetectionStrategy, inject, DestroyRef } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { MatInputModule } from '@angular/material/input';
import { toSignal } from '@angular/core/rxjs-interop';
import { distinctUntilChanged, map } from 'rxjs';

@Component({
  selector: '[app-field-error]',
  templateUrl: './field-error.component.html',
  styleUrls: ['./field-error.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule, MatInputModule],
  standalone: true
})
export class FieldErrorComponent {
  private destroyRef = inject(DestroyRef);

  field = input.required<AbstractControl<any, any>>();
  fieldName = input.required<string>();

  // 将控件错误状态转换为信号，自动响应状态变化
  fieldErrors = toSignal(
    this.field().statusChanges.pipe(
      distinctUntilChanged(), // 仅在状态实际变化时更新，避免冗余检测
      map(() => this.field().errors) // 映射到当前错误对象
    ),
    {
      initialValue: this.field().errors, // 设置初始值
      destroyRef: this.destroyRef // 自动清理订阅，防止内存泄漏
    }
  );
}

修改后的模板代码

<!-- 邮箱格式错误提示 -->
<span *ngIf="fieldErrors()?.['email']">
  Invalid email address.
</span>

<!-- 必填项错误提示（可扩展其他错误类型） -->
<span *ngIf="fieldErrors()?.['required']">
  {{ fieldName() }} is required.
</span>

关键说明 #

1. toSignal的作用：把RxJS的statusChanges Observable转换为Angular信号，当控件验证状态变化时，信号会自动更新，触发OnPush组件的变更检测。
2. distinctUntilChanged：过滤重复的状态变化，减少不必要的组件更新。
3. destroyRef：自动管理订阅生命周期，组件销毁时清理Observable订阅，避免内存泄漏。

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