Error creating jqxInput programmatically

[trandmaParticipant]

I was following the example layed out here:
https://www.jqwidgets.com/angular/angular-grid/angular-grid-everpresentrowwithcustomwidgets.htm

The call:
qwidgets.createInstance('#myInput', 'jqxInput', options);

Produces an error:

TestComponent.html:1 ERROR TypeError: a(...)[d] is not a function
    at Object.createInstance (jqxcore.js:formatted:1)
    at createEverPresentRowWidget [as createeverpresentrowwidget] (test.component.ts:69)

Is there a workaround or some other way of creating the widget manually?
Thank you,

[trandmaParticipant]

This is the “files” section of my tsconfig.json file:

    "files": [
        "src/app/app.module.ts",
        "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxbuttons.ts",
        "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxcheckbox.ts",
        "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxdatetimeinput.ts",
        "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxdropdownlist.ts",
        "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid.ts",
        "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxinput.ts",
        "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxnotification.ts",
        "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxnumberinput.ts"
    ]

[MartinParticipant]

Hello trandma,

This is the recommended way.
Can you, please, send you code, so we can see where this issue might come from?
Also, is this error thrown in development mode or when you build your project?
Thank you!

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[trandmaParticipant]

I created an example Angular CLI project and uploaded it here:
https://drive.google.com/open?id=1bOhaY4KMp8xe9LbMHif1Wto_lzQVlAcG

It is pretty close to the https://www.jqwidgets.com/angular/angular-grid/angular-grid-everpresentrowwithcustomwidgets.htm example. When you start the project up with ‘npm start’ and visit localhost:4200, the page rendering breaks due to the above mentioned error. When you comment out the sections in app.component.ts which create the everpresentrow (jqxInput) for the first column, the table loads and is usable.

[MartinParticipant]

Hello trandma,

I found where you issue is coming from.
You should add jqxInputComponent and Angular Forms Module in your app.module.ts file:

import {BrowserModule} from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import {AppComponent} from './app.component';
import {jqxGridComponent} from "jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid";
import { jqxRadioButtonComponent } from "jqwidgets-scripts/jqwidgets-ts/angular_jqxradiobutton";
import { jqxInputComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxinput';
import {HttpClientModule} from "@angular/common/http";
import {DataService} from "./data.service";

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule
    ],
    declarations: [
        AppComponent,
        jqxGridComponent,
        jqxInputComponent,
        jqxRadioButtonComponent
    ],
    providers: [DataService],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[trandmaParticipant]

Thank you for getting back to me on this. I tried what you suggested. It produces the following error:

Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("<input type="text" [ERROR ->][(ngModel)]="ngValue">"): ng:///AppModule/jqxInputComponent.html@0:19
    at syntaxError (compiler.js:215)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)

At one point I had tried adding the component declarations to the module, but since a number of them failed with the above mentioned error, I removed them. It was also quite counterintuitive as the rest of the widgets (like the jqxDropDownList, jqxDateTimeInput and jqxNumberInput) do not require such declarations to work.

How did you work around the above mentioned ngModel related error? I did not change anything else in my example besides adding the declaration you suggested.

[MartinParticipant]

Hello trandma,

Did you add FormsModule in the NgModule’ imports, as shown above?

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[trandmaParticipant]

No I did not. After adding the FormsModule, the input component works.

Thank you.

[Author]

Posts