Angular 2+扩展FormControlDirective遇绑定异常，求解析答案要点

嘿，我来帮你把那段你看不懂的答案拆解明白，这样你就能搞清楚为啥自定义指令会出绑定异常了！

首先，得先搞懂两个核心概念：

• 你要扩展的FormControlDirective，它的选择器formControl/formControlName可不是只在这个指令本身用。
• Angular表单系统里的值访问器（Value Accessor），也会通过这些选择器来匹配对应的DOM控件。

什么是值访问器？ #

简单说，值访问器就是Angular表单和原生控件之间的「翻译官」：

• 它把表单模型里的值同步到DOM控件上（比如把formControl的value显示在input里）；
• 也把用户在DOM里输入的内容同步回表单模型（比如你在input里打字，表单的value跟着更新）。

内置的FormControlDirective能和input、checkbox、select这些控件完美配合，就是因为Angular已经为这些控件实现了对应的默认值访问器（比如DefaultValueAccessor对应普通文本输入框，CheckboxValueAccessor对应复选框）。

为啥会出现绑定异常？ #

当你自定义hybridFormControl指令时，相当于你替换/覆盖了原生FormControlDirective的部分行为，但原来的那些默认值访问器依然会通过formControl/formControlName选择器去绑定控件。这时候如果你的自定义指令没有实现这些值访问器的核心逻辑，Angular就找不到正确的「翻译官」，自然就会抛出绑定异常。

怎么解决？ #

你需要让hybridFormControl指令实现所有Angular内置的默认值访问器的接口逻辑——也就是要实现ControlValueAccessor接口的所有方法，并且把这些值访问器的功能集成到你的自定义指令里。

举个简单的代码示例：

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

@Directive({
  selector: '[hybridFormControl]',
  providers: [
    // 告诉Angular，这个自定义指令就是值访问器的提供者
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => HybridFormControlDirective),
      multi: true
    }
  ]
})
export class HybridFormControlDirective extends FormControlDirective implements ControlValueAccessor {
  // 实现ControlValueAccessor的核心方法
  writeValue(value: any): void {
    // 可以委托给原生值访问器的实现，也可以写自定义逻辑
    super.valueAccessor?.writeValue(value);
  }

  registerOnChange(fn: any): void {
    super.valueAccessor?.registerOnChange(fn);
  }

  registerOnTouched(fn: any): void {
    super.valueAccessor?.registerOnTouched(fn);
  }

  // 这里添加你自己的扩展逻辑...
}

简单说，就是你的自定义指令不能只继承FormControlDirective的结构，还要补上它依赖的「值访问器」功能，这样Angular表单系统才能正确识别并和你的指令配合，绑定异常自然就解决了。

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