@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 {
  // 當(dāng)文件選擇器選擇的文件發(fā)生改變時(shí)調(diào)用的回調(diào)函數(shù)
  onChange: (any) => any;
  // 當(dāng)文件選擇器選擇的被操作后調(diào)用的回調(diào)函數(shù)
  onTouched: () => any;

  // 監(jiān)聽(tīng)宿主元素的 change 事件
  @HostListener('change', ['$event.target.files']) onElChange = (files: FileList) => {
    this.onChange(files);
  };

  // 監(jiān)聽(tīng)宿主元素的 blur 事件
  @HostListener('blur', []) onElTouched = () => {
    this.onTouched();
  };

  constructor(private el: ElementRef<HTMLInputElement>) {   // <5>
  }
  ngOnInit(): void {
    this.el.nativeElement.addEventListener('change', this.listener);
  }

  // 來(lái)自 ControlValueAccessor 接口，用來(lái)設(shè)置元素的值
  writeValue(obj: any): void {
    this.el.nativeElement.value = obj;
  }
  // 來(lái)自 ControlValueAccessor 接口，用來(lái)將一個(gè)函數(shù)注冊(cè)為 onChange 回調(diào)函數(shù)
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }
  // 來(lái)自 ControlValueAccessor 接口，用來(lái)將一個(gè)函數(shù)注冊(cè)為 onTouched 回調(diào)函數(shù)
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  // 來(lái)自 ControlValueAccessor 接口，設(shè)置表單元素是否啟用
  setDisabledState?(isDisabled: boolean): void {
    this.el.nativeElement.disabled = isDisabled;
  }

}

<input type="file" [(ngModel)]="foo.files" inputFile />

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: 'input[type=datetime][valueAsDate]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DateValueDirective),
      multi: true
    }
  ]
})
export class DateValueDirective implements ControlValueAccessor {

  /**
   * See https://date-fns.org/v2.0.0-alpha.25/docs/format
   * 自定義日期展示格式
   * @type {string}
   * @memberof DateValueDirective
   */
  // tslint:disable-next-line:no-input-rename
  @Input('valueAsDate') format: string;

  private dateValue: Date;

  @HostListener('input', ['$event.target.value']) onChange = (_: any) => { };

  @HostListener('blur', []) onTouched = () => { };

  get element() { return this.elementRef.nativeElement; }

  constructor(
    private elementRef: ElementRef,
    private renderer: Renderer2   // <1>
  ) { }

  parseDate(str: string) {
    return parseDate(str, this.format, new Date(), { awareOfUnicodeTokens: true });
  }

  formatDate(date: Date) {
    return formatDate(date, this.format, { awareOfUnicodeTokens: true });
  }

  /**
   * 設(shè)置組件的值的時(shí)候，先把新的值存到一個(gè)成員變量中，然后再把新的值格式化為 string
   */
  writeValue(date: Date): void {
    this.dateValue = date;
    this.renderer.setProperty(this.element, 'value', this.formatDate(date));
  }

  /**
   * 在 input 元素值發(fā)生變化的時(shí)候，先嘗試把變化后的值轉(zhuǎn)換成 Date 對(duì)象
   * 如果轉(zhuǎn)換失敗，那么依然使用之前的值
   * 否則，將新的值傳遞給回調(diào)函數(shù)
   */
  registerOnChange(fn: any): void {
    const onChange = (value: string) => {
      const date = this.parseDate(value);
      if (isValidDate(date)) {
        this.dateValue = date;
        fn(date);
      } else {
        fn(this.dateValue);
      }
    };
    this.onChange = onChange;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  setDisabledState?(isDisabled: boolean): void {
    this.renderer.setProperty(this.element, 'disabled', isDisabled);
  }
}

<input type="datetime" valueAsDate="M/d/yyyy h:mm:ss a" [(ngModel)]="foo.date">