Angular2 custom input tags 'no value accessor' and not an array
<p>I have a problem with a custom input component when I upgraded from rc1 to rc6 (I also just upgraded to @angular/forms 2.0.0-rc.7) </p>

<p>I get the following error</p>

<blockquote>
  <p>No value accessor for form control with name: 'tags'</p>
</blockquote>

<p>Forms without custom inputs are working.</p>

<p>I tryed adding <code>ngDefaultControl</code> in my form: <code>&lt;input-tags formControlName="tags" ngDefaultControl&gt;&lt;/input-tags&gt;</code></p>

<p>this resolves the error above but my value is always a string of the last inserted tag and not an array of all tags.</p>

<p>form.component.js</p>

<pre><code>import {
  Component,
  EventEmitter,
} from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { getValidators } from '../../../services/schemaTools';
import { collectionName, mongooseSchema } from '../../config';

@Component({
  selector: `form-component`,
  template: `
&lt;form class="sl-form"  [formGroup]="form"(ngSubmit)="onSubmit()"&gt;
  &lt;input-tags formControlName="tags"&gt;&lt;/input-tags&gt;
  &lt;input type="submit" value="Save"&gt;
&lt;/form&gt;`,
  inputs: ['id', 'data'],
  outputs: ['save'],
})
export class FormComponent {
  static get parameters() {
    return [[FormBuilder]];
  }
  constructor(_fb) {
    this.save = new EventEmitter(false);
    this.mongooseSchema = mongooseSchema;
    this._fb = _fb;
  }
  ngOnInit() {
    this.form = getValidators(this._fb, this.mongooseSchema, this.data);
  }
  ngOnChanges(changes) {
    if (changes.data) this.form = getValidators(this._fb, this.mongooseSchema, this.data);
  }
  onSubmit() {
    if (this.form.valid) this.save.emit(Object.assign({}, { id: this.id }, this.form.value));
    return false;
  }
}
</code></pre>

<p>input-tag.component.js</p>

<pre><code>import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/common';

class AbstractValueAccessor {
  constructor() {
    this._value = '';
    this.onChange = () =&gt; {};
    this.onTouched = () =&gt; {};
  }
  get value() {
    return this._value;
  }
  set value(v) {
    if (v !== this._value) {
      this._value = v;
      this.onChange(v);
    }
  }
  writeValue(value) {
    this._value = value;
    this.onChange(value);
  }

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

@Component({
  selector: 'input-tags',
  template: `
&lt;div class="input-widget"&gt;
  &lt;div class="tags"&gt;
    &lt;div *ngFor="let ltag of value"&gt;{{ltag}} &lt;span class="icon-clear-field_S" (click)="remove(ltag)"&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;input type="text" [(ngModel)]="tag" (keydown)="keydown($event)"/&gt;
  &lt;button class="button" (click)="add($event)"&gt;&lt;span class="icon-add"&gt;&lt;/span&gt;&lt;/button&gt;
&lt;/div&gt;
  `,
  styles: [require('./input-tags.component.sass')],
  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() =&gt; InputTagsComponent), multi: true }],
})
export class InputTagsComponent extends AbstractValueAccessor {
  constructor() {
    super();
    this.value = [];
  }
  keydown($event) {
    if (($event.keyCode === 13) || ($event.keyCode === 188)) {
      this.add($event);
    } else if ($event.keyCode === 8 &amp;&amp; !this.tag) {
      this.value.pop();
    }
  }
  add($event) {
    $event.preventDefault();
    if (!this.value) this.value = [];
    if (this.tag &amp;&amp; !this.value.includes(this.tag)) {
      this.value.push(this.tag);
      this.tag = '';
    }
  }
  remove(tag) {
    this.value = this.value.filter(item =&gt; item !== tag);
  }
}
</code></pre>

<p>In case you might wonder I am writing my application in ES6.</p>