Angular2自定义输入标记＆＃39;无值访问者＆＃39;而不是一个数组

Question

当我从rc1升级到rc6时，我的自定义输入组件出现问题（我也刚升级到@ angular / forms 2.0.0-rc.7）

我收到以下错误

  

没有带名称的表单控件的值访问器：＆＃39;标记＆＃39;

没有自定义输入的表单正在运行。

我尝试在表单中添加ngDefaultControl：<input-tags formControlName="tags" ngDefaultControl></input-tags>

这解决了上面的错误，但我的值始终是最后插入的标记的字符串，而不是所有标记的数组。

form.component.js

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: `
<form class="sl-form"  [formGroup]="form"(ngSubmit)="onSubmit()">
  <input-tags formControlName="tags"></input-tags>
  <input type="submit" value="Save">
</form>`,
  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;
  }
}

输入tag.component.js

import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/common';

class AbstractValueAccessor {
  constructor() {
    this._value = '';
    this.onChange = () => {};
    this.onTouched = () => {};
  }
  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: `
<div class="input-widget">
  <div class="tags">
    <div *ngFor="let ltag of value">{{ltag}} <span class="icon-clear-field_S" (click)="remove(ltag)"></span></div>
  </div>
  <input type="text" [(ngModel)]="tag" (keydown)="keydown($event)"/>
  <button class="button" (click)="add($event)"><span class="icon-add"></span></button>
</div>
  `,
  styles: [require('./input-tags.component.sass')],
  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => 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 && !this.tag) {
      this.value.pop();
    }
  }
  add($event) {
    $event.preventDefault();
    if (!this.value) this.value = [];
    if (this.tag && !this.value.includes(this.tag)) {
      this.value.push(this.tag);
      this.tag = '';
    }
  }
  remove(tag) {
    this.value = this.value.filter(item => item !== tag);
  }
}

如果您可能想知道我在ES6中编写我的应用程序。