angular2自定义表单输入无法读取未定义的属性“名称”

Question

当我迁移到新的AgularVersion2Final时，我得到以下错误

未定义TypeError:无法读取未定义属性的“名称”

我的自定义输入

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

没有它我就能得到

没有名称为“defaultLanguage”的窗体控件的值访问器

Answer 1

经过一些调试，我发现

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

更改为

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

解决了这个问题。