Angular 2 custom form input: Cannot read property 'subscribe' of undefined

Question

I am trying to create a custom form input for file uploads in angular 2 based on this post Angular 2 custom form input but I the following error err

zone.js:446 Unhandled Promise rejection: Cannot read property 'subscribe' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'subscribe' of undefined(…)

my code is

import {
  Component,
  Directive,
  EventEmitter,
  Provider,
} from 'angular2/core';

import { NG_VALUE_ACCESSOR } from 'angular2/common';
import { CONST_EXPR } from 'angular2/src/facade/lang';
import { forwardRef } from 'angular2/src/core/di';

@Component({
  selector: 'file-upload',
  template: `<div
class="drop-zone"
(dragover)="dragover = true"
(dragleave)="dragover = false"
(drop)="handleFiles($event); $event.preventDefault();"
[ngClass]="{'dragover':dragover}"
>
  Drop file here
</div>
<input type="file" (change)="handleFiles($event)" id="fileup"> <label for="fileup" class="button">Upload File</label>
<br>`,
  styles: [require('./file-upload.component.sass')],
  outputs: ['fileChange'],
})
export class FileUploadComponent {
  constuctor() {
    this.fileChange = new EventEmitter(false);
  }
  setValue(value) {
    this.image = value;
  }
  handleFiles(event) {
    event.preventDefault();
    event.stopPropagation();
    const files = event.target.files || event.dataTransfer.files;
    const file = files[0];

    const reader = new FileReader();
    reader.onload = (e) => {
      this.fileChange.emit(e.target.result);
    };
    reader.readAsBinaryString(file);
  }
}

const CUSTOM_VALUE_ACCESSOR = CONST_EXPR(new Provider(
  NG_VALUE_ACCESSOR, {
    useExisting: forwardRef(() => FileUploadValueAccessor),
    multi: true,
  }));

@Directive({
  selector: 'file-upload',
  host: {
    '(fileChange)': 'onChange($event)',
  },
  providers: [CUSTOM_VALUE_ACCESSOR],
})
export class FileUploadValueAccessor {
  static get parameters() {
    return [[FileUploadComponent]];
  }
  constructor(host) {
    this.host = host;
    this.onChange = () => {};
    this.onTouched = () => {};
  }

  writeValue(value) {
    this.host.setValue(value);
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }
  registerOnTouched(fn) {
    this.onTouched = fn;
  }
}

select select · Accepted Answer · 2016-06-01T14:56:43

I found the solution, the problem was that I had a typo "constuctor" should be "constructor" thus the output fileChange was not defined.

Angular 2 custom form input: Cannot read property 'subscribe' of undefined

1 Answers