Angular2中的错误 - 无值访问者''

时间:2016-07-26 08:54:25

标签: angular angular2-forms

我最近将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)

从错误中,我可以推断出它使用的是角度/形式而非角度/普通。

我的组件定义如下,

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>

使用不对吗?

  

从&#39; @ angular / common&#39;中导入{FORM_DIRECTIVES};

[编辑] - 在@Harry的建议之后,我使用了

  

从&#39; @ angular / forms&#39;中导入{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)

请帮忙。

1 个答案:

答案 0 :(得分:2)

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

  

从'@ angular / forms'导入{REACTIVE_FORM_DIRECTIVES};

这解决了我的问题,现在PrimeNG Component也可以使用NgModel绑定。

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

此致 截拳道