Angular中多自定义值访问器NG_VALUE_ACCESSOR冲突问题求解

当两个指令都注册了NG_VALUE_ACCESSOR提供者时，Angular无法确定使用哪个值访问器，就会抛出More than one custom value accessor matches form control错误。要同时使用这两个转换逻辑，有两种可行方案：

方案一：将两个转换逻辑合并到单个自定义值访问器中 #

既然两个指令都是处理表单值的转换（复选框0/1转布尔、输入值转数字），可以把逻辑整合到同一个指令里，根据输入元素的类型自动适配处理逻辑：

import { Directive, ElementRef, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

@Directive({
  selector: '[appValueConverter]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ValueConverterDirective),
      multi: false
    }
  ]
})
export class ValueConverterDirective implements ControlValueAccessor {
  private onChange: (value: any) => void = () => {};
  private onTouched: () => void = () => {};

  constructor(private el: ElementRef) {}

  writeValue(value: any): void {
    const element = this.el.nativeElement;
    if (element.type === 'checkbox') {
      // 复选框：将布尔/0/1转换为勾选状态
      element.checked = value === true || value === 1;
    } else {
      // 普通输入：将数字转换为字符串显示
      element.value = value != null ? String(value) : '';
    }
  }

  registerOnChange(fn: (value: any) => void): void {
    this.onChange = fn;
    this.el.nativeElement.addEventListener('input', () => {
      const element = this.el.nativeElement;
      let convertedValue: any;
      if (element.type === 'checkbox') {
        // 复选框：将勾选状态转换为1/0（或true/false，按需调整）
        convertedValue = element.checked ? 1 : 0;
      } else {
        // 普通输入：将字符串转换为数字
        convertedValue = element.value ? Number(element.value) : null;
      }
      this.onChange(convertedValue);
    });
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
    this.el.nativeElement.addEventListener('blur', () => this.onTouched());
  }

  setDisabledState(isDisabled: boolean): void {
    this.el.nativeElement.disabled = isDisabled;
  }
}

使用时只需在输入元素上添加appValueConverter指令即可，无需同时使用两个指令。

方案二：保留主值访问器，让辅助指令依赖并修改其行为 #

选择其中一个指令作为主值访问器（比如负责转数字的指令），另一个指令不注册NG_VALUE_ACCESSOR，而是注入主指令实例，重写其处理逻辑：

主指令（负责将输入值转为数字） #

import { Directive, ElementRef, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

@Directive({
  selector: '[appToNumber]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ToNumberDirective),
      multi: false
    }
  ]
})
export class ToNumberDirective implements ControlValueAccessor {
  onChange: (value: any) => void = () => {};
  onTouched: () => void = () => {};

  constructor(private el: ElementRef) {}

  writeValue(value: any): void {
    this.el.nativeElement.value = value != null ? String(value) : '';
  }

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

  private bindInputListener(): void {
    this.el.nativeElement.addEventListener('input', () => {
      const value = this.el.nativeElement.value ? Number(this.el.nativeElement.value) : null;
      this.onChange(value);
    });
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
    this.el.nativeElement.addEventListener('blur', () => this.onTouched());
  }

  setDisabledState(isDisabled: boolean): void {
    this.el.nativeElement.disabled = isDisabled;
  }
}

辅助指令（负责复选框0/1转布尔） #

import { Directive, ElementRef, OnInit } from '@angular/core';
import { ToNumberDirective } from './to-number.directive';

@Directive({
  selector: '[appCheckboxBoolConverter]'
})
export class CheckboxBoolConverterDirective implements OnInit {
  constructor(
    private el: ElementRef,
    private numberAccessor: ToNumberDirective
  ) {}

  ngOnInit(): void {
    // 移除主指令的原有输入监听
    this.el.nativeElement.removeEventListener('input', this.numberAccessor.onChange);
    // 重写主指令的writeValue方法
    this.numberAccessor.writeValue = (value: any) => {
      this.el.nativeElement.checked = value === true || value === 1;
    };
    // 添加复选框专属的输入监听
    this.el.nativeElement.addEventListener('input', () => {
      const convertedValue = this.el.nativeElement.checked ? 1 : 0;
      this.numberAccessor.onChange(convertedValue);
    });
  }
}

使用时，在复选框上同时添加appToNumber和appCheckboxBoolConverter指令，普通输入框只添加appToNumber即可。

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