Angular第三方下拉组件未实现ControlValueAccessor致表单报错

错误原因 #

你遇到的TypeError: dir.valueAccessor.registerOnTouched is not a function，本质是Angular响应式表单要求绑定formControlName的组件必须实现ControlValueAccessor接口——这个接口是表单控件与组件之间的通信桥梁，负责同步值、触发变更回调、标记触摸状态等操作。第三方的mac-select没实现这个接口，导致表单指令在组件销毁时找不到对应方法，抛出错误。

解决方案 #

方案一：封装适配器组件（推荐，符合Angular表单规范） #

把第三方的mac-select封装成一个实现了ControlValueAccessor的自定义组件，就能正常使用formControlName了。

1. 创建封装组件mac-select-wrapper.component.ts：

import { Component, forwardRef, ViewChild, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { MacSelectComponent } from '第三方库实际路径'; // 替换为组件真实导入路径

@Component({
  selector: 'mac-select-wrapper',
  template: `
    <mac-select
      formItemUtils
      name="documents"
      (click)="onTouched()"
      (change)="handleChange($event)"
      [items]="items"
      [placeholder]="placeholder"
      bindLabel="doc"
      bindValue="idDoc"
    ></mac-select>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MacSelectWrapperComponent),
      multi: true
    }
  ]
})
export class MacSelectWrapperComponent implements ControlValueAccessor {
  @ViewChild(MacSelectComponent) macSelect!: MacSelectComponent;
  @Input() items!: any[];
  @Input() placeholder!: string;

  private onChangeCallback: (value: any) => void = () => {};
  private onTouchedCallback: () => void = () => {};

  // 同步表单值到组件
  writeValue(value: any): void {
    if (this.macSelect && value !== undefined) {
      this.macSelect.value = value;
    }
  }

  // 注册值变更回调
  registerOnChange(fn: (value: any) => void): void {
    this.onChangeCallback = fn;
  }

  // 注册触摸状态回调
  registerOnTouched(fn: () => void): void {
    this.onTouchedCallback = fn;
  }

  // 设置组件禁用状态
  setDisabledState(isDisabled: boolean): void {
    if (this.macSelect) {
      this.macSelect.disabled = isDisabled;
    }
  }

  // 组件值变更时同步到表单
  handleChange(event: any): void {
    this.onChangeCallback(event);
  }

  // 标记表单控件为已触摸
  onTouched(): void {
    this.onTouchedCallback();
  }
}

2. 父组件模板替换为封装后的组件：

<mac-select-wrapper
  formControlName="doc_dni"
  [items]="documentos"
  [placeholder]="'Comun.TipoAcceso1.PlaceHolderSelect' | translate"
  (click)="changePattern(form2.get('doc_dni')?.value)"
></mac-select-wrapper>

方案二：手动同步表单与组件状态（快速临时解决） #

如果不想封装组件，可以直接在父组件手动处理值同步和触摸状态，放弃使用formControlName：

1. 修改父组件模板：

<mac-select
  formItemUtils
  name="documents"
  (click)="handleSelectClick()"
  (change)="handleSelectChange($event)"
  [items]="documentos"
  [placeholder]="'Comun.TipoAcceso1.PlaceHolderSelect' | translate"
  bindLabel="doc"
  bindValue="idDoc"
  [value]="form2.get('doc_dni')?.value"
></mac-select>

2. 父组件TS添加同步逻辑：

// 下拉框值变更时更新表单
handleSelectChange(value: any): void {
  this.form2.get('doc_dni')?.setValue(value, { emitEvent: false });
}

// 点击下拉框时标记表单控件为已触摸，同时执行原有逻辑
handleSelectClick(): void {
  this.form2.get('doc_dni')?.markAsTouched();
  this.changePattern(this.form2.get('doc_dni')?.value);
}

注意：这种方法需要手动处理所有表单状态同步（比如禁用、脏值状态等），适合临时快速解决，长期来看封装组件更符合Angular规范。

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