如何阻止mat-stepper修改mat-step内ng-template中的mat-form-field？

一、问题产生的原因 #

Mat-Stepper切换到下一步时，会自动触发当前步骤的表单验证逻辑。对于既未被触碰（untouched）又未被修改（pristine）的表单字段，stepper会将其标记为interacted，触发Angular表单的状态更新，进而给对应的mat-form-field添加mat-form-field-invalid类。

至于模板内的字段也受影响，是因为ng-template渲染后的DOM属于当前mat-step的DOM树，stepper的验证逻辑会遍历整个步骤内的所有表单控件，自然也包含模板渲染的内容。

二、解决办法：隔离模板内的字段不受stepper控制 #

1. 给模板内的字段单独套FormGroup #

不让模板内的表单和步骤的主FormGroup关联，单独创建一个独立的FormGroup，这样stepper的验证逻辑只会作用于主表单，不会影响模板里的表单：

// 组件内单独定义编辑用的表单
editForm = new FormGroup({
  name: new FormControl('', Validators.required),
  description: new FormControl('')
});

模板写法：

<mat-step [stepControl]="mainForm">
  <!-- 主步骤内容 -->
  <ng-template #editTemplate>
    <form [formGroup]="editForm">
      <mat-form-field>
        <input matInput formControlName="name" placeholder="名称">
      </mat-form-field>
    </form>
  </ng-template>
</mat-step>

<mat-step>
  <!-- 复用模板 -->
  <ng-container [ngTemplateOutlet]="editTemplate"></ng-container>
</mat-step>

2. 手动拦截stepper的状态修改 #

监听stepper的selectionChange事件，切换步骤时清空模板内控件的错误状态：

onStepChange(event: StepperSelectionEvent) {
  const prevStep = event.previouslySelectedStep;
  if (!prevStep) return;
  
  // 定位模板内的表单字段，移除错误样式类
  const templateFields = prevStep._elementRef.nativeElement.querySelectorAll('.template-form .mat-form-field');
  templateFields.forEach((field: HTMLElement) => {
    field.classList.remove('mat-form-field-invalid');
  });
  // 同时重置表单控件的原始状态
  this.editForm.markAsUntouched();
  this.editForm.markAsPristine();
}

给模板内的表单加类标识方便定位：

<ng-template #editTemplate>
  <form [formGroup]="editForm" class="template-form">
    <!-- 表单字段 -->
  </form>
</ng-template>

3. 把模板移到stepper外部定义 #

直接将ng-template放在所有mat-stepper的外部，让stepper的验证逻辑扫不到模板内容，复用的时候直接引用即可：

<!-- 模板定义在stepper外，脱离步骤上下文 -->
<ng-template #editTemplate>
  <form [formGroup]="editForm">
    <mat-form-field>
      <input matInput formControlName="name" placeholder="名称">
    </mat-form-field>
  </form>
</ng-template>

<mat-stepper>
  <mat-step>
    <!-- 主步骤中使用模板 -->
    <ng-container [ngTemplateOutlet]="editTemplate"></ng-container>
  </mat-step>
  <mat-step>
    <!-- 编辑步骤中复用模板 -->
    <ng-container [ngTemplateOutlet]="editTemplate"></ng-container>
  </mat-step>
</mat-stepper>

4. 用ViewContainerRef手动创建模板实例 #

如果必须在步骤内定义模板，可通过ViewContainerRef手动创建模板实例，挂载到独立容器中，和步骤的DOM上下文隔离开：

@ViewChild('editTemplate', { read: TemplateRef }) editTemplate!: TemplateRef<any>;
@ViewChild('templateContainer', { read: ViewContainerRef }) templateContainer!: ViewContainerRef;

ngAfterViewInit() {
  // 手动创建模板实例并挂载到指定容器
  this.templateContainer.createEmbeddedView(this.editTemplate);
}

模板对应写法：

<mat-step>
  <!-- 独立容器，用于挂载模板实例 -->
  <div #templateContainer></div>
</mat-step>

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