Angular父表单通过ControlValueAccessor向嵌套控件传递错误咨询

Angular的ControlValueAccessor接口默认只负责表单值、基础交互状态（touched/dirty/disabled） 在父FormControl和子组件之间的同步，不会自动同步父FormControl上挂载的错误对象，这是框架的设计逻辑，不是实现错误。
你当前手动通过@Input绑定传错误的方案可以正常运行，但复用性差：所有用到该自定义表单组件的父组件都需要额外写错误传递的绑定逻辑，容易遗漏。

不需要父组件做任何额外配置，子组件内部直接获取绑定的外层FormControl实例，监听状态变化完成错误双向同步，是侵入性最低、复用性最好的方案。

子组件代码修改 #

1. TypeScript 部分 #

import { Component, OnInit, Self } from '@angular/core';
import { FormGroup, FormControl, NgControl, ControlValueAccessor } from '@angular/forms';

@Component({
  selector: 'app-location-form',
  templateUrl: './location-form.component.html',
  styleUrls: ['./location-form.component.scss']
  // 注意：不要在providers数组中手动添加NG_VALUE_ACCESSOR提供者，否则会触发循环依赖、拿到重复的控件实例
})
export class LocationFormComponent implements ControlValueAccessor, OnInit {
  locationForm = new FormGroup({
    address: new FormControl('')
    // 其余location相关表单控件按原有逻辑定义
  });

  constructor(@Self() public controlDir: NgControl) {
    // 将当前组件注册为值访问器，替代原有手动写NG_VALUE_ACCESSOR提供者的逻辑
    this.controlDir.valueAccessor = this;
  }

  ngOnInit(): void {
    const parentControl = this.controlDir.control;

    // 父控件错误同步到子表单：监听父控件状态变化，同步错误、触发错误显示
    parentControl.statusChanges.subscribe(() => {
      if (parentControl.errors) {
        this.locationForm.setErrors(parentControl.errors, { emitEvent: false });
        // 标记控件为已触碰，确保Angular Material的mat-error能正常显示
        this.locationForm.markAllAsTouched();
      } else {
        this.locationForm.setErrors(null, { emitEvent: false });
      }
    });

    // 可选：子表单内部校验错误同步到父控件（如果需要把子表单的校验规则结果透出给父表单）
    this.locationForm.statusChanges.subscribe(() => {
      if (this.locationForm.invalid) {
        parentControl.setErrors({ ...parentControl.errors, ...this.locationForm.errors }, { emitEvent: false });
      } else {
        // 仅清除子表单产生的校验错误，保留父控件上设置的后端返回类错误
        const { backend, ...parentErrors } = parentControl.errors || {};
        parentControl.setErrors(Object.keys(parentErrors).length ? parentErrors : null, { emitEvent: false });
      }
    });
  }

  // ControlValueAccessor 接口实现，按原有逻辑编写即可
  writeValue(value: any): void {
    value && this.locationForm.patchValue(value, { emitEvent: false });
  }

  registerOnChange(fn: any): void {
    this.locationForm.valueChanges.subscribe(fn);
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    isDisabled ? this.locationForm.disable({ emitEvent: false }) : this.locationForm.enable({ emitEvent: false });
  }

  onTouched: () => void = () => {};
}

2. 模板部分 #

父组件模板可以删除手动传错误的绑定，恢复成最简写法：

<!-- organization.component.html -->
<div [formGroup]="organizationForm" class="organization-form">
  <!-- 其他表单项 -->
  <app-location-form formControlName="location"></app-location-form>
</div>

子组件模板不需要再接收输入的locationErrors，直接读取内部表单的错误即可：

<!-- location-form.component.html -->
<form class="location-form" [formGroup]="locationForm" novalidate>
  <mat-form-field
    class="form-field"
    [matTooltip]="readonlyText"
    [matTooltipDisabled]="!isFormDisabled"
  >
    <mat-error *ngIf="locationForm.errors?.backend?.address?.[0]">
      {{ locationForm.errors.backend.address[0] }}
    </mat-error>

    <input
      matInput
      placeholder="Adres"
      formControlName="address"
      [matAutocomplete]="addressAuto"
      (blur)="onTouched()"
    />
  </mat-form-field>
  <!-- 其他表单项按原有逻辑编写 -->
</form>

• 手动@Input传错误：就是你当前使用的方案，逻辑简单但复用性差，所有父组件调用时都需要重复写错误绑定逻辑
• 自定义NG_VALIDATORS同步校验：仅支持将子组件内部的校验错误同步到父控件，无法解决父控件手动设置的错误（如后端返回错误）向子组件同步的问题
• 通过ControlContainer注入父表单：耦合度过高，子组件强依赖父表单的结构定义，通用性差不推荐

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