如何模拟未实现ControlValueAccessor的子组件？

问题根源 #

Angular的formControlName指令要求绑定的组件必须实现ControlValueAccessor接口，否则表单控件无法与组件进行数据交互，测试时会因找不到registerOnTouched等接口方法抛出错误。由于无法修改子组件，可通过以下方式解决：

一、测试环境下快速修复报错 #

1. 为子组件提供模拟的ControlValueAccessor #

在测试模块的providers中，针对子组件的NG_VALUE_ACCESSOR令牌提供一个模拟实现，覆盖Angular默认的查找逻辑：

import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { DropdownComponent } from './path/to/dropdown.component';

// 模拟ControlValueAccessor接口实现
class MockDropdownValueAccessor implements ControlValueAccessor {
  writeValue(value: any): void {}
  registerOnChange(fn: any): void {}
  registerOnTouched(fn: any): void {}
  setDisabledState?(isDisabled: boolean): void {}
}

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [ParentComponent, DropdownComponent],
    providers: [
      {
        provide: NG_VALUE_ACCESSOR,
        useClass: MockDropdownValueAccessor,
        multi: true,
        host: { component: DropdownComponent } // 指定为目标子组件提供该Accessor
      }
    ]
  }).compileComponents();
});

2. 手动为子组件实例赋值valueAccessor #

在组件初始化后，获取子组件实例并直接赋值模拟的valueAccessor对象：

import { ComponentFixture, TestBed, By } from '@angular/core/testing';
import { ParentComponent } from './parent.component';
import { DropdownComponent } from './path/to/dropdown.component';

let fixture: ComponentFixture<ParentComponent>;
let dropdownComponent: DropdownComponent;

beforeEach(() => {
  fixture = TestBed.createComponent(ParentComponent);
  // 获取下拉子组件实例
  dropdownComponent = fixture.debugElement.query(By.directive(DropdownComponent)).componentInstance;
  // 手动赋值包含所需方法的模拟对象
  dropdownComponent.valueAccessor = {
    registerOnTouched: jasmine.createSpy('registerOnTouched'),
    registerOnChange: jasmine.createSpy('registerOnChange'),
    writeValue: jasmine.createSpy('writeValue'),
    setDisabledState: jasmine.createSpy('setDisabledState')
  };
  fixture.detectChanges();
});

这种方式不仅能解决报错，还能通过Jasmine Spy验证表单控件与组件的交互逻辑。

二、实际运行环境的长期解决方案 #

如果实际项目中也需要让该下拉组件支持formControlName，可以封装一个包装器组件，由包装器实现ControlValueAccessor接口，内部与原生下拉组件进行交互：

import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { DropdownComponent } from './path/to/dropdown.component';

@Component({
  selector: 'app-dropdown-wrapper',
  template: `
    <app-dropdown
      [value]="currentValue"
      (valueChange)="handleValueChange($event)"
      [disabled]="isComponentDisabled"
    ></app-dropdown>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DropdownWrapperComponent),
      multi: true
    }
  ]
})
export class DropdownWrapperComponent implements ControlValueAccessor {
  currentValue: any;
  isComponentDisabled = false;
  private onChange = (value: any) => {};
  private onTouched = () => {};

  writeValue(value: any): void {
    this.currentValue = value;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

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

  setDisabledState(isDisabled: boolean): void {
    this.isComponentDisabled = isDisabled;
  }

  handleValueChange(value: any) {
    this.currentValue = value;
    this.onChange(value);
    this.onTouched();
  }
}

之后在父组件中使用<app-dropdown-wrapper formControlName="yourControlName"></app-dropdown-wrapper>即可，完全符合ReactiveForms的使用要求。

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