file value handling in angular forms

file-value.directive.ts

import { Directive, HostListener, Output, EventEmitter } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: 'input[type="file"][ngu-file-ref]',
  exportAs: 'nguFiles',
  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileValueDirective, multi: true }]
})
// tslint:disable-next-line:class-name
export class FileValueDirective implements ControlValueAccessor {
  onChange: (_: any) => {};

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

  @HostListener('change', ['$event.target.files'])
  fileChanges(evt: File) {
    this.onChange(evt);
  }
 
  writeValue(value: any): void {
    
  }
  registerOnChange(fn: any) {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

}