Angular组件测试遇NG01203错误：表单控件无值访问器问题排查

问题根源 #

这个错误的核心是：FormFieldMarkdown作为自定义表单控件，未实现Angular表单要求的ControlValueAccessor接口，导致Angular无法将外部传入的FormControl和组件内部的md-editor做值关联。Angular升级后表单校验逻辑更严格，因此之前能运行的测试现在触发了规范校验错误。

具体修复步骤 #

1. 让组件实现ControlValueAccessor接口 #

修改FormFieldMarkdown组件，实现接口并注册值访问器Provider：

import { Component, Input, OnChanges, AfterViewInit, forwardRef, ViewEncapsulation } from '@angular/core';
import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
    selector: 'bg-formfield-markdown',
    host: {
        class: 'forminput',
        '[class.forminput-is-error]': 'isErrorState',
        '[class.forminput-locked]': 'isLockedState',
    },
    template: `<md-editor (ngModelChange)="handleValueChange($event)" [(ngModel)]="markdown_content" [upload]="doUpload"></md-editor>`,
    styleUrls: ['./formfield-markdown.css'],
    encapsulation: ViewEncapsulation.ShadowDom,
    // 注册值访问器，让Angular识别该组件为表单控件
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => FormFieldMarkdown),
            multi: true
        }
    ]
})
export class FormFieldMarkdown implements OnChanges, AfterViewInit, ControlValueAccessor {
    @Input() control: FormControl;
    markdown_content: string = '';

    // ControlValueAccessor 必备回调
    private onChangeCallback: (value: string) => void = () => {};
    private onTouchedCallback: () => void = () => {};

    // 接收外部FormControl传入的值
    writeValue(value: string): void {
        this.markdown_content = value || '';
    }

    // 注册值变化回调，同步到外部FormControl
    registerOnChange(fn: (value: string) => void): void {
        this.onChangeCallback = fn;
    }

    // 注册触摸回调，标记控件已交互
    registerOnTouched(fn: () => void): void {
        this.onTouchedCallback = fn;
    }

    // 可选：处理控件禁用状态（如果md-editor支持禁用）
    setDisabledState?(isDisabled: boolean): void {
        // 示例：给md-editor添加禁用属性
        // this.isDisabled = isDisabled;
    }

    // 内部值变化时同步到外部
    handleValueChange(value: string) {
        this.onChangeCallback(value);
        this.onTouchedCallback();
    }

    // 保留原有OnChanges、AfterViewInit的实现逻辑
}

2. 调整测试模块配置 #

确保测试模块导入表单相关模块，支持FormControl和ngModel的使用：

TestBed.configureTestingModule({
  declarations: [
      FormFieldMarkdown,
      BgMarkdownComponent,
      MarkdownHintsDialog
  ],
  imports: [
      RouterTestingModule,
      CommonModule,
      ReactiveFormsModule, // 新增：支持响应式表单
      FormsModule, // 新增：支持ngModel
      ...COMMON_IMPORTS,
  ],
  providers: [
      ...COMMON_MOCKS_PROVIDERS_WITH_SUBS,
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
}).compileComponents();

fixture = TestBed.createComponent(FormFieldMarkdown);
component = fixture.debugElement.componentInstance;
// 先赋值control再触发变更检测
component.control = new FormControl('', Validators.required);
fixture.detectChanges();

3. 验证联动逻辑 #

修改后，外部传入的control会通过ControlValueAccessor自动和内部的markdown_content同步，组件内部的值变化也会同步到外部FormControl，表单校验状态（如错误状态）也能正确关联。

为什么升级前能运行？ #

旧版本Angular对自定义表单控件的校验逻辑更宽松，未强制要求实现ControlValueAccessor即可通过测试；升级后Angular严格执行表单控件规范，因此必须实现该接口才能正常工作。

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