当我迁移到新的 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'
最佳答案
调试后发现
import { NG_VALUE_ACCESSOR } from '@angular/common';
改为
import { NG_VALUE_ACCESSOR } from '@angular/forms';
解决了问题。
关于angular2自定义表单输入无法读取未定义的属性 'name',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39571013/