Angular2 中的错误 - 无值访问器“”答案

【问题标题】：Error in Angular2 - No Value accessor ''Angular2 中的错误 - 无值访问器“”
【发布时间】：2016-07-28 22:06:39
【问题描述】：

我最近将 angular-2 版本从 beta-17 升级到 RC4。

我已经看到问题的解决方案了，No value accessor for '' angular2。

我的问题与这个问题的答案有关。

我已经用

更新了我的 boot.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { provide, enableProdMode, PLATFORM_DIRECTIVES } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { HTTP_PROVIDERS, Http } from '@angular/http';
import {disableDeprecatedForms, provideForms} from '@angular/forms';

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

var injectables = [
    provideForms(),
    disableDeprecatedForms(),
    APP_ROUTER_PROVIDERS,
    provide(LocationStrategy, { useClass: HashLocationStrategy }),
    HTTP_PROVIDERS,    
];

bootstrap(AppComponent, injectables)
    .then(null, console.error.bind(console));

我仍然面临值访问器的错误，错误如下，

platform-browser.umd.js:1900 Error: No value accessor for ''
    at new BaseException (forms.umd.js:599)
    at _throwError (forms.umd.js:1569)
    at setUpControl (forms.umd.js:1546)
    at NgModel._setUpStandalone (forms.umd.js:2349)
    at NgModel._setUpControl (forms.umd.js:2341)
    at NgModel.ngOnChanges (forms.umd.js:2300)
    at DebugAppView._View_ProjectDetailComponent1.detectChangesInternal (ProjectDetailComponent.template.js:1176)
    at DebugAppView.AppView.detectChanges (core.umd.js:12143)
    at DebugAppView.detectChanges (core.umd.js:12247)
    at DebugAppView.AppView.detectContentChildrenChanges (core.umd.js:12161)

从错误中，我可以推断它使用 angular/forms 而不是 angular/Common。

我的组件定义如下，

import {Component, Injector, OnInit, OnDestroy} from '@angular/core';
import {FORM_DIRECTIVES} from '@angular/common';
import {Subscription} from 'rxjs/Rx';
import {ProjectComponent} from '../../../project.component';

import { Calendar, InputText, InputTextarea, Checkbox, DataTable, Column, Dropdown } from 'primeng/primeng';


@Component({
    selector: 'projectDetail',
    directives: [Calendar, InputText, InputTextarea, Checkbox, DataTable, Column, Dropdown, FORM_DIRECTIVES],
    templateUrl: 'template/project/details/project'
})

我的组件模板：

<input type="text" class="form-control" name="ProjectNo" [(ngModel)]="ProjectNo" />
        <input type="text" pInputText class="form-control" name="ProjectText" [(ngModel)]="Text" />
        <textarea pInputTextarea class="form-control" name="ProjectAdditionalText"></textarea>
        <input type="text" pInputText class="form-control" name="Phase" [(ngModel)]="Phase" />

        <p-calendar [readonlyInput]="true" monthNavigator="true" yearNavigator="true" placeholder="Pick a date" name="PlannedStartDate" [(ngModel)]="PlannedStartDate"></p-calendar>

        <p-checkbox name="BackwardPlanning" [(ngModel)]="BackwardPlanning"></p-checkbox>

用错了吗？

从“@angular/common”导入 {FORM_DIRECTIVES}；

[Edit] -- 在@Harry 的建议下，我已经使用了

从“@angular/forms”导入 {REACTIVE_FORM_DIRECTIVES}；

但它导致我另一个错误如下

platform-browser.umd.js:1900 ORIGINAL EXCEPTION: No provider for NgModel!

platform-browser.umd.js:1900 Error: DI Exception
    at NoProviderError.BaseException [as constructor] (core.umd.js:4412)
    at NoProviderError.AbstractProviderError [as constructor] (core.umd.js:4529)
    at new NoProviderError (core.umd.js:4565)
    at ReflectiveInjector_._throwOrNull (core.umd.js:6461)
    at ReflectiveInjector_._getByKeyDefault (core.umd.js:6489)
    at ReflectiveInjector_._getByKey (core.umd.js:6452)
    at ReflectiveInjector_.get (core.umd.js:6261)
    at ElementInjector.get (core.umd.js:11873)
    at ElementInjector.get (core.umd.js:11873)
    at ReflectiveInjector_._getByKeyDefault (core.umd.js:6486)

请帮忙。

【问题讨论】：

我认为是这样。您不妨将表单更改为使用 REACTIVE_FORM_DIRECTIVES 从 @angular/forms
@HarryNinh：我在您发表评论后编辑了问题。您现在可以看到 NgModel 的另一个错误。我仍然不清楚为什么现在突然找不到 NgModel。
我认为你应该回到 FORM_DIRECTIVES。我认为问题在于您现在需要为所有具有 [(ngModel)] 的输入添加名称属性。新的表单模型需要它。
@FilipLauc：这里的好东西最初是我自己控制的名称属性。即使我有错误。
@Jeet，很抱歉，我不清楚如果您使用 REACTIVE_FORM_DIRECTIVES，您还必须对模板进行大量更改 :) 顺便说一下，您能发布您的模板吗在这里，人们会更清楚地了解您的问题吗？

标签： angular angular2-forms

【解决方案1】：

在研究了所有可能的答案之后。我最终使用

从“@angular/forms”导入 {REACTIVE_FORM_DIRECTIVES}；

这解决了我的问题，现在 PrimeNG 组件也适用于 NgModel 绑定。

希望这可以帮助遇到类似问题的其他人。

问候，吉特

【讨论】：