ngModel:''没有值访问器

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"'

我做了以下事情:

1. 进口{FORM_DIRECTIVES}自'angular2/common'
2. 包含FORM_DIRECTIVES在directives部分内容中@Component
3. 初始化 myModel

我在这里错过了什么？

Answer 1

我认为你应该使用别的东西而不是组件ngModel的参数my-select...因为它已经被Angular2使用了.

我试了一下,model似乎更好......我没有错误了.

编辑

如果要在my-select组件级别处理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自定义表单输入

希望它对你有帮助,蒂埃里

Answer 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));