首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >angular2 rc.5自定义输入,未指定名称的表单控件没有值访问器

angular2 rc.5自定义输入,未指定名称的表单控件没有值访问器
EN

Stack Overflow用户
提问于 2016-08-15 23:45:14
回答 4查看 81K关注 0票数 82

我有一个简单的自定义输入组件,

代码语言:javascript
复制
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;
  }

}

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

代码语言:javascript
复制
/**
 * 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 {  
}

和main

代码语言:javascript
复制
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

我已经在我的一个组件中使用了我的自定义输入,如下所示,但是我得到了“没有指定名称属性的表单控件的值访问器”。

代码语言:javascript
复制
<custom-input name="firstName" [(ngModel)]="firstName"></custom-input>

app.component看起来像这样

代码语言:javascript
复制
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;
}
EN

回答 4

Stack Overflow用户

发布于 2016-08-20 19:13:36

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

票数 74
EN

Stack Overflow用户

发布于 2016-08-31 03:04:02

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

代码语言:javascript
复制
<custom-input name="firstName" [(ngModel)]="firstName" ngDefaultControl></custom-input>
票数 46
EN

Stack Overflow用户

发布于 2016-08-24 18:55:15

ngDefaultControl添加到您的输入。例如

代码语言:javascript
复制
<inline-editor type="textarea" [(ngModel)]="editableTextArea" (onSave)="saveEditable($event)" value="valor" ngDefaultControl> </inline-editor> 

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

Finally指令:[FORM_DIRECTIVES]

这将会起作用:)谢谢你的上述评论

票数 13
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38958347

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档