在 Angular 應用中，我們有兩種方式來實現表單綁定——“模板驅動表單”與“響應式表單”。這兩種方式通常能夠很好的處理大部分的情況，但是對于一些特殊的表單控件，例如 input[type=datetime] 、 input[type=file] ，我們需要重寫默認的表單綁定方式，讓我們綁定的變量不再僅僅只是一個字符串，而是一個 Date 或者 File 對象。為了達成這一目的，我們需要自定義表單控件的 ControlValueAccessor 。

ControlValueAccessor 接口是 Angular Forms API 與 DOM 之間的橋梁，通過提供不同的 ControlValueAccessor ，我們就可以使用統一的 Angular Forms API 來操作不同的 HTML 表單元素。

在我們使用 ngModel 或者 formControl 的時候，這兩個 Directive 會向 Angular 的依賴注入容器申請實現了 ControlValueAccessor 接口的對象，這是一種典型的面向接口編程的設計。例如，如果我們需要為 input[type=file] 提供一個用來綁定 File 對象的 ControlValueAccessor ，只需要在依賴注入容器中提供一個 FileControlValueAccessor 的實現就可以了。不過，我們并不想覆蓋其他類型 input 元素的 ControlValueAccessor ，因為那樣肯定會對已有代碼造成大范圍的破壞。所以在這里，我們需要使用 Angular 的分層注入能力——在 ElementInjector 中提供 FileControlValueAccessor 。關于 ElementInjector 更多的內容，請看這里 a-curios-case-of-the-host-decorator-and-element-injectors-in-angular 。

下面演示的兩個 Directive 您都可以在這里查看 在線演示 。

首先讓我們來創建一個 Directive，這個指令將會選中 input[type=file][appInputFile] 元素，這樣我們就可以有選擇的為文件選擇器的 ElementInjector 定義新的 Provider。

@Directive({  selector: 'input[type=file][inputFile]',    // <1>  providers: [    {      provide: NG_VALUE_ACCESSOR,             // <2>      useExisting: forwardRef(() => InputFileDirective), // <3>      multi: true   // <4>    }  ]})export class InputFileDirective implements ControlValueAccessor, OnInit, OnDestroy {  // 當文件選擇器選擇的文件發生改變時調用的回調函數  onChange: (any) => any;  // 當文件選擇器選擇的被操作后調用的回調函數  onTouched: () => any;  // 監聽宿主元素的 change 事件  @HostListener('change', ['$event.target.files']) onElChange = (files: FileList) => {    this.onChange(files);  };  // 監聽宿主元素的 blur 事件  @HostListener('blur', []) onElTouched = () => {    this.onTouched();  };  constructor(private el: ElementRef<HTMLInputElement>) {   // <5>  }  ngOnInit(): void {    this.el.nativeElement.addEventListener('change', this.listener);  }  // 來自 ControlValueAccessor 接口，用來設置元素的值  writeValue(obj: any): void {    this.el.nativeElement.value = obj;  }  // 來自 ControlValueAccessor 接口，用來將一個函數注冊為 onChange 回調函數  registerOnChange(fn: any): void {    this.onChange = fn;  }  // 來自 ControlValueAccessor 接口，用來將一個函數注冊為 onTouched 回調函數  registerOnTouched(fn: any): void {    this.onTouched = fn;  }  // 來自 ControlValueAccessor 接口，設置表單元素是否啟用  setDisabledState?(isDisabled: boolean): void {    this.el.nativeElement.disabled = isDisabled;  }}