angular2 rc.5自定义input,没有值的访问器用于未指定名称的表单控件

我有这样简单的自定义input组件,

import {Component, Provider, forwardRef} from "@angular/core"; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms"; const noop = () => {}; const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomInputComponent), multi: true }; @Component({ selector: 'custom-input', template: ` <input class="form-control" [(ngModel)]="value" name="somename" (blur)="onTouched()"> `, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] }) export class CustomInputComponent implements ControlValueAccessor{ //The internal data model private _value: any = ''; //Placeholders for the callbacks private _onTouchedCallback: () => void = noop; private _onChangeCallback: (_:any) => void = noop; //get accessor get value(): any { return this._value; }; //set accessor including call the onchange callback set value(v: any) { if (v !== this._value) { this._value = v; this._onChangeCallback(v); } } //Set touched on blur onTouched(){ this._onTouchedCallback(); } //From ControlValueAccessor interface writeValue(value: any) { this._value = value; } //From ControlValueAccessor interface registerOnChange(fn: any) { this._onChangeCallback = fn; } //From ControlValueAccessor interface registerOnTouched(fn: any) { this._onTouchedCallback = fn; } } 

我有这样的应用程序模块,

 /** * Created by amare on 8/15/16. */ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule, FormsModule } from '@angular/forms'; import { AppComponent } from './app/app.component'; import {CustomInputComponent} from "./app/shared/custom.input.component"; import {RouterModule} from "@angular/router"; @NgModule({ imports: [ BrowserModule, ReactiveFormsModule, FormsModule, RouterModule ], declarations: [ AppComponent, CustomInputComponent], bootstrap: [ AppComponent ] }) export class AppModule { } 

和主要

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); 

我已经在我的组件之一中使用了我的自定义input,如下所示,但是得到'没有值的访问器,用于未指定的名称属性的表单控件'。

 <custom-input name="firstName" [(ngModel)]="firstName"></custom-input> 

和app.component看起来像这样

 import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'] }) export class AppComponent { title = 'app works!'; firstName: string; } 

将ngDefaultControl添加到主机中的自定义input组件解决了这个问题,谢谢@danieleds

将ngDefaultControl添加到自定义input组件。 这增加了双向数据绑定,除非你正在做一些独特的事情,否则你不应该实现值存取方法。

 <custom-input name="firstName" [(ngModel)]="firstName" ngDefaultControl></custom-input> 

ngDefaultControl添加到您的input。 例如

 <inline-editor type="textarea" [(ngModel)]="editableTextArea" (onSave)="saveEditable($event)" value="valor" ngDefaultControl> </inline-editor> 

然后import { FORM_DIRECTIVES } from '@angular/common' ;

最后是指令: [FORM_DIRECTIVES]

这将工作:)感谢上述评论