IgTextEditor Angular2 Component produces error - No value accessor for ''

State See Verified Answer
Replies 7 replies
Subscribers 12 subscribers
Views 1715552 views
Users 0 members are here

igTextEditor

600

Dieter Endres posted over 8 years ago

Hello Team,

I have started to try IgniteUI Angular2 component in my application but if i use IgTextEditor component with NgModel binding then it produces following error,

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:1240)
    at DebugAppView.AppView.detectChanges (core.umd.js:12143)
    at DebugAppView.detectChanges (core.umd.js:12247)
    at DebugAppView.AppView.detectContentChildrenChanges (core.umd.js:12161)

My Componet Definition is as following,

import {Component} from '@angular/core';
import {REACTIVE_FORM_DIRECTIVES} from '@angular/forms';
import {IgDatePickerComponent, IgTextEditorComponent, IgGridComponent} from 'igniteui-angular2';

@Component({
    selector: 'Detail',
    directives: [REACTIVE_FORM_DIRECTIVES, IgTextEditorComponent],
    template: `
<ig-text-editor widgetId="editor1" [(ngModel)]="textName" [options]="{width:'100%'}">
</ig-text-editor>`
})

export class DetailComponent {
textName: string;

constructor(){
this.textName="Hello World";
}
}

Please suggest why this is Happening. I have used till now normal HTML control for them it works.

Awaiting for you Response.

Regards,

Jeetendra

600

Offline Dieter Endres posted over 8 years ago in reply to Sam Elliott

Hi Sam,

Thank you for the Response.

if I see the sample example, there you are not using any FORM_DIRECTIVES/ REACTIVE_FORM_DIRECTIVES for ngModel use.

My problem persists and I didn’t understood the reason behind this.

I have changed my bootstrap a bit and it looks as follows, (bold lines are the additional changes)

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 { AuthHttp, AuthConfig } from 'angular2-jwt';

import { ServiceProvider } from './serviceProvider';

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,

    new ServiceProvider().getServiceProviders(),

];

bootstrap(AppComponent, injectables)

    .then(null, console.error.bind(console));

please help me with this Problem.
Cancel
Reply

Cancel
2525

Sam Elliott posted over 8 years ago

Hello,

Your syntax seems correct, there is nothing discernably incorrect from the code provided. Given that the error thrown was by platform-browser.umd.js, this is likely due to an error in how SystemJS or within the chosen bundling tool. If using SystemJS, this is likely due to something being incorrectly configured within the system.config.js file.

I suggest taking a look at our sample here which utilizes the ig-text-editor being bound using ng-model: http://igniteui.github.io/igniteui-angular2/samples/igEditors/igEditors.html

Let me know if you have any questions.
Cancel
Reply

Cancel