Cannot set property 'isInputWidget' of undefined.

I’m having the following error when he’s trying to create a form : Cannot set property 'isInputWidget' of undefined at ViewWrappedE…, _nativeError: ZoneAwareError, originalError: TypeError: Cannot set property 'isInputWidget' of undefined at Bootstrap3Component.initializeCon…, context: DebugContext, __zone_symbol__currentTask: ZoneTask…}

My project that has this issue you can find at : https://github.com/Punkiebe/FootballWorld/

Bootstrap is working correctly in my home page, I use json-schema-form in my admin module.

Here a list of the modules I use :

±- @angular/cli@1.0.0-rc.1 ±- @angular/common@2.4.9 ±- @angular/compiler@2.4.9 ±- @angular/compiler-cli@2.4.9 ±- @angular/core@2.4.9 ±- @angular/forms@2.4.9 ±- @angular/http@2.4.9 ±- @angular/platform-browser@2.4.9 ±- @angular/platform-browser-dynamic@2.4.9 ±- @angular/router@3.4.9 ±- @types/jasmine@2.5.38 ±- @types/node@6.0.64 ±- ajv@4.10.0 ±- angular2-json-schema-form@0.3.0-alpha.26 ±- bootstrap@3.3.7 ±- codelyzer@2.0.1 ±- core-js@2.4.1 ±- hammerjs@2.0.8 ±- jquery@3.1.1 ±- rxjs@5.2.0 ±- ts-node@2.0.0 ±- tslint@4.4.2 ±- typescript@2.0.10 `-- zone.js@0.7.8

In my angular-cli config I added this for bootstrap :

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css", "styles.css" ], "scripts": ["../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.js"],

Someone an idea what I did wrong to activate the bootstrap framework? In the readme there’s not a lot on how to change frameworks.

Also when I remove [framework]="selectedFramework" I still get the same error.

[hoon-k]

This console error problem can be alleviated if you hide the form until you have the schema to set. Something like this:

<json-schema-form loadExternalAssets="false" [schema]="schema" framework="bootstrap-4" (onSubmit)="submit($event)" *ngIf="schema">
</json-schema-form>

[RichardMViGEM]

I ran into this issue as well, spent an embarrassingly lot of time on it… Anyway, here’s what resolved it for me:

Say you want to use myFormData in your json-shema-form, like this:

<json-schema-form
  [form] = "myFormData"
></json-schema-form>

And you get the content of myFormData from anywhere but “inline definition”, like an external .json file for example If it looks something like this:

myFormData = {
"schema": {
      // your schema definition
    },

    "form": [
      // your form layout definition
    ]
}

in your angular component, myFormData should be declined as follows:

myFormData: any = {
    "schema": {},
    "form": []
  };

I reckon it comes down to when exactly angular renders things and loads variables. My guess is, the <json-schema-form> element is loaded immediately and angular looks up myFormData. It finds something and tries to populate the html-element with content, but lots of stuff is not yet loaded, hence all those nasty error messages. Once asynchronous loading is finished, though, the form is rendered but the error messages are still there. At least that’s what happened to me. Hope this helps someone else out.