Question

我在Angular 2.0中创建了一个自定义元素（<my-select>），当我在组件中包含ngModel属性时，我立即遇到以下错误：

EXCEPTION: No value accessor for '' in [myModel in App@0:195]

这里是一名掠夺者：http://plnkr.co/edit/wlkPWcB92YZASCwCnmcw?p=preview

（打开控制台查看错误）

如果您只是注释掉src/app.ts中的以下行，则该组件将正确呈现：

'[ngModel]="myModel"'

我做了以下事情：

从{FORM_DIRECTIVES}

'angular2/common'

在FORM_DIRECTIVES

directives

@Component

已初始化myModel

我在这里缺少什么？

Answer 1

我认为你应该使用Date A B 03/01/2000 NA NA 04/01/2000 79.5 325 05/01/2000 79.5 322.5 07/01/2000 79.5 327.5以外的其他内容作为ngModel组件的参数...因为它已经被Angular2使用了。

我尝试使用my-select，看起来更好......我不再有错误了。

修改

如果您想在model组件的级别处理ngModel，可以查看以下链接：https://github.com/angular/angular/issues/2543。

如果要实现符合ngModel的组件，可以查看以下链接：

http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/。请参阅：与NgModel兼容的组件
部分
Angular 2 custom form input

希望它可以帮到你，亨利

Answer 2

我因 2 原因而接受此错误：

1）组件必须将自身附加为值访问者，例如：

@Component({
  selector: 'ace-editor',
  template: `<div class="ng2-ace-editor"></div>`,
})

export class AceEditor implements OnInit, ControlValueAccessor {

  constructor(private element: ElementRef, @Optional() ngControl: NgControl) {
    if (ngControl) {
      ngControl.valueAccessor = this;
    }
  }

2）您没有混合已弃用和新表单。如果您使用新的API添加到main.ts：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { disableDeprecatedForms, provideForms } from '@angular/forms';

import { AppComponent } from './app.component';

bootstrap(AppComponent, [
  disableDeprecatedForms(),
  provideForms()
])
.catch((err: any) => console.error(err));

Answer 3

我遇到了同样的问题。我想我尝试将我的变量双向绑定到元素，然后在属性中获取该值：

Username is required.

如您所见，视图无法修改模型中的_hidden变量。将绑定修复为单向工作：

Username is required.

请注意从[(ngModel)]到(ngModel)的更改。

Answer 4

试试这个

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

从@ angular / forms导入任何和所有表单符号 - NgForm，Validators等。从@ angular / common导入它们将导致No值accessor found错误。

Answer 5

就我而言，这是一个简单的拼写错误。该组件的选择器是我的组件＆＃39;但在html中我键入了<my-compoent>。注意最后三个字母？编译得很好，然后你就拥有了这个没有价值的访问者＆＃39;运行时出错。

根据我的经验，你可以得到一些其他非常奇怪的错误，因为这里和那里有拼写错误。 Typescript编译器并不关心标记。

Answer 6

当我在gulp中创建一个发布任务时，我遇到了类似的问题。我跟踪了Angular2代码的缩小版本的错误，这是您在plunker中使用的。这个Angular2 Issue在github上是我找到答案的地方，这里是Igor Minar对the Issue的回应（Igor是Angular2项目的主要贡献者）。

TL; DR; 使用.dev Angular2库文件，直到Angular团队修复此问题。

Answer 7

我没有使用新的Form API，我在单元测试中仍然遇到NgModel的错误。

看起来只是在组件中指定NgModel是不够的。例如

之前
directives:[NgModel]

之后
directives:[FORM_DIRECTIVES]

解决了我的问题。 干杯：）

Answer 8

@DenisKolodin's answer提到使用ngControl.valueAccessor = this;设置访问者。但是，some articles建议以这种方式注册提供商：

@Component({
  selector: '...',
  template: '...',
  providers: [
  {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => MyComponent ),
    multi: true,
  }      
})
export class MyComponent implements ControlValueAccessor{ ...

这是在Angular's DefaultValueAccessor source

中完成的

Answer 9

我也遇到了这个错误。这是我的愚蠢。我会在这里描述一下，以防其他人跳进去。

用于在组件之间传递变量的双向绑定格式（假设我想将组件A中称为myObj的obj传递给组件B）。

因此，在组件A的模板中，我会有类似

的内容

<componentB [(myObjectInB)]="myObjectInA"></componentB>

在组件B中，我必须有一个名为myObjectInB的对象，我们声明它的方式必须是：

@Input() myObjectInB ...

这里的 @Input（）是我错过的，这就是为什么它会抛出这个错误。

Answer 10

<强>＆GT; = RC.5

@NgModule({
  imports: [BrowserModule, FormsModule, ReativeFormsModule],

FormsModule和/或ReativeFormsModule取决于您是使用模板驱动表单，模型驱动表单还是两者都

另见

ngModel：＆＃39;＆＃39;没有价值访问者

10 个答案: