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
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.
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.
There is nothing discernably wrong with the syntax provided here. I suggest providing a runnable isolated sample that reproduces this issue to further assist you in debugging.
Please provide more information on the purpose of the changes added to the injectables array and how it is related to the issue.
Also, it seems that this issue is closer related to Angular or SystemJS rather than our controls, I suggest reading the information on the Angular GitHub page regarding questions pertaining to the platform: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Hi,
Thank you for the answer.
I have made a simple plunker where i wanted to test ngModel with igTextEditor.
It is working now for normal html TextBox. Can you please have a look and try to Setup systemjs.config so that i can use your igniteui angular2 components.
My plunker is here https://plnkr.co/edit/j4ypFN?p=preview
Looking Forward to your Response.
Hey,
Got it working. Had to make some slight modifications such as using npmcdn to obtain references to the Ignite UI core and lob files among a few other things.
Here is the link to the plunkr:
https://plnkr.co/edit/GMTLEm04UYhCA9i7rfvZ?p=preview
Thank you for the working demo and your time to help me.
It is working but i have seen that to update model value we Need to click outside of IgTextEditor Control. It is not updating value at the same time as we type to Change value.
If we talk about ngModel (two way data binding) with HTML Input Control for text, It updates simultaneously with user's typing inside Control.
Is it a Problem with IgTextEditor or it will work like this only?
Why we do not Need to add FORM_DIRECTIVES into Component directives Array? If i use Ignit ui Angular2 Control and my custom Control then it Fails because Ignite ui Control doesn't require FORM_DIRECTIVES to bind via NgModel but Default HTML Control still Need it.
Is there any solution for ngModel to use along with Ignite ui Control and another HTML Control?
Please help to understand this.
Hello.
Needing to click outside of the igTextEditor for changes to persist in the model is reproducible in the sample provided. I suggest opening an issue on GitHub for this issue here: https://github.com/IgniteUI/igniteui-angular2/issues
Per Angular's documentation on FORM_DIRECTIVES, there is not much information on this module and it is labeled as experimental. Since this questions is more framework specific rather than the Ignite UI controls, I suggest reading the information on the Angular GitHub page regarding questions pertaining to the platform: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question