angular2自定义表单输入无法读取未定义的属性 'name'

Question

当我迁移到新的 agular version 2 final 时，出现以下错误

Uncaught TypeError: Cannot read property 'name' of undefined

我的自定义输入

import { Component, EventEmitter, Provider, forwardRef } from '@angular/core';
import isoLangs from '../../models/languageObjects/isoLangs';
import AbstractValueAccessor from '../AbstractValueAccessor';
import { NG_VALUE_ACCESSOR } from '@angular/common';

@Component({
    selector: 'input-language',
    template: `
<div class="input-widget">
    <input type="text" placeholder="Language" [(ngModel)]="query" (click)="showLang = !showLang" (keyup)="showLang = true"/>
    <span (click)="value = ''" class="clear icon-clear-field_S"></span>
    <div class="languages" [hidden]="!showLang">
        <div *ngFor="let lang of isoLangs | filter:query" (click)="setLanguage(lang)">
            {{lang.name}}
        </div>
    </div>
</div>
    `,
    styles: [require('./input-language.component.sass')],
    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputLanguageComponent), multi: true }],
})
export class InputLanguageComponent extends AbstractValueAccessor {
    constructor() {
        super();
        this.langSelected = new EventEmitter(false);
        this.isoLangs = isoLangs;
    }

    ngOnInit() {
        console.log('init input-lang this.value ', this.value);
    }

    set value(v) {
        if (v !== this._value) {
            this._value = v;
            this.query = this.isoLangs[v];
            this.onChange(v);
        }
        if (!v) {
            console.log('clear');
            this.query = '';
            this.showLang = false;
        }
    }
    setLanguage(lang) {
        this.value = lang.iso;
        this.query = lang.name;
        this.showLang = false;
        this.langSelected.emit(lang);
    }
}

我以一种形式使用它

<input-language formControlName="defaultLanguage" ngDefaultControl></input-language>

按照我在 transformer.ts 中找到的堆栈跟踪

const injectors = element.providerTokens.map(t => functionName(t));

如果我查看 element.providerTokens，我会看到一个未定义的元素

0:DefaultValueAccessor(_renderer, _elementRef)
1:OpaqueToken
2:FormControlName(parent, validators, asyncValidators, valueAccessors)
3:NgControl()
4:NgControlStatus(cd)
5:InputLanguageComponent()
6:undefined

另外我想知道为什么我必须使用 ngDefaultControl

没有它我得到

No value accessor for form control with name: 'defaultLanguage'

Answer 1

调试后发现

import { NG_VALUE_ACCESSOR } from '@angular/common';

改为

import { NG_VALUE_ACCESSOR } from '@angular/forms';

解决了问题。