跨组件ng-template中mat-form-field未交互却显示错误提示的问题

问题现象 #

Angular Material默认逻辑是：当FormControl处于pristine（未修改）且untouched（未交互）状态时，即便控件验证无效，也不会显示错误高亮。但如果包含mat-form-field的ng-template是在其他组件中定义，再通过ng-container/ngTemplateOutlet引入当前组件渲染时，即使控件带有ng-untouched和ng-pristine标识，仍会被错误地高亮显示无效状态，且该问题仅在跨组件共享模板时复现。

复现场景：

• 步骤1：在TemplateStepComponent中定义包含mat-form-field的ng-template，并将该模板保存到组件的静态字段中
• 步骤2：在当前组件的mat-stepper步骤中，对同一个带Validators.required的FormControl做三种渲染：
  1. 引入跨组件定义的TemplateRef渲染：控件处于untouched+pristine，但错误高亮（不符合预期）
  2. 内联定义ng-template并通过ngTemplateOutlet渲染：行为符合预期，无错误高亮
  3. 直接渲染常规mat-form-field：行为符合预期，无错误高亮

问题原因 #

这是由于跨组件的TemplateRef创建上下文和渲染上下文不一致导致的：
mat-form-field内部的错误状态判断依赖于模板创建时的组件注入器和上下文，当模板在其他组件中创建后，其内部关联的状态检测逻辑会绑定到原组件的上下文，而非渲染时的当前组件上下文，导致它误判了FormControl的交互状态，忽略了pristine和untouched的判断条件。

解决方案 #

方案1：自定义ErrorStateMatcher（推荐） #

通过自定义错误状态匹配器，强制让mat-form-field只在控件**无效且（已修改/已交互）**时才显示错误状态，不受模板上下文影响：

1. 定义匹配器类：

import { ErrorStateMatcher } from '@angular/material/core';
import { FormControl } from '@angular/forms';

export class CustomErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null): boolean {
    return !!(control && control.invalid && (control.dirty || control.touched));
  }
}

2. 在组件中实例化匹配器：

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { CustomErrorStateMatcher } from './custom-error-state-matcher';

@Component({
  // ...组件元数据
})
export class YourComponent {
  item = new FormControl('', Validators.required);
  errorMatcher = new CustomErrorStateMatcher();
}

3. 在mat-form-field中绑定匹配器（无论是跨组件模板还是内联模板都适用）：

<mat-form-field [errorStateMatcher]="errorMatcher">
  <input matInput [formControl]="item" placeholder="Item">
  <mat-error>必填项</mat-error>
</mat-form-field>

方案2：避免跨组件共享TemplateRef #

改为通过组件通信传递FormControl，在目标组件内部渲染mat-form-field，而非直接传递模板：

• 将TemplateStepComponent改为接收FormControl输入的组件，内部渲染mat-form-field
• 在当前组件中直接使用该组件并绑定FormControl，而非通过ngTemplateOutlet引入模板

补充说明 #

类似问题也会在使用<form>和type="submit"按钮时出现，但本场景未使用表单，因此该场景的修复方案不适用。

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