在 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 = () =>
