generate the form on click

[estradamarkie]

Hi, is it possible to generate the form on a (click)="generate()" because at first I render my JSON in textarea so I can I edit them then put a button with the function generate() though, I tried doing so using .innerHTML so I can add the whole <schema-form...> within the function but somehow its not generating the form.

my function() var txtVal = (<HTMLInputElement>document.getElementById('RequestDisplay')).value; this.mySchema = txtVal; console.log(this.mySchema); document.getElementById('jsonForm').innerHTML = '<schema-form [schema]="mySchema" ></schema-form>'

[fbessou]

You can put your schema-form component in a *ngIf="schema !== null" and update the schema variable when the user clicks the "Generate" button.

[estradamarkie]

Sorry did you mean something like this, when the page loads it tries to generate the form but its giving an error because my JSON schema doesn't have the $schema property. Which I'm trying to add via textarea so I can see if this function will actually generate the form.

`

<schema-form [schema]="jsonSchemaForm" *ngIf="schema !== null">

`

in my generate function() this.jsonSchemaForm = (<HTMLInputElement>document.getElementById('RequestDisplay')).value;

[fbessou]

With your example, changing *ngIf="schema !== null" by *ngIf="jsonSchemaForm !== null" should work if you initialize jsonSchemaForm to null in you component's constructor. If it is not working try moving the *ngIf to the surrounding <div> element.

[estradamarkie]

Thanks,

Though if I put <schema-form [schema]="compiledJson" ></schema-form> in my HTML it's giving me an error of some 'type undefined`

Error: Uncaught (in promise): Error: Error in ./InterfaceComponent class InterfaceComponent - inline template:22:19 caused by: Cannot read property 'type' of undefined TypeError: Cannot read property 'type' of undefined

it seems like its trying to find compiledJson JSON schema once the page has been load, I assigned compiledJson in a public compiledJson: any at the very top of my constructor, then using that in a function() which is being triggered by ngOninit.

but if I do something like

public compiledJson = { jsonSchema } this works fine but my JSON schema is coming form the API.

JSON: { "type":"object", "properties":{ "Name":{ "type":"string" }, "Number":{ "format":"int32", "type":"integer" }, "PointInTime":{ "format":"date-time", "type":"string" }, "Url":{ "type":"string" }, "Children":{ "type":"array", "items":{ "type":"object", "properties":{ "ChildName":{ "type":"string" }, "ChildNumber":{ "format":"int32", "type":"integer" }, "ChildPointInTime":{ "format":"date-time", "type":"string" }, "CustomData":{ "type":"object", "additionalProperties":{ "type":"array", "items":{ "type":"object" } } } } } }, "$schema":"http://json-schema.org/draft-04/hyper-schema#" }

[estradamarkie]

I've fixed it now :)

[estradamarkie]

Idk if I should create a new issue for this but its more a query than an issue,

Is there a way of using the object name like "Name": {} as the description? the JS object I get back is from Swagger UI so its limited to what I can really do.

[fbessou]

You can create your own widgets using the path property as description but adding a description to your properties in your schema should be a lot easier.

[estradamarkie]

It would be but that's really not my decision, it would be the back-end people and I've already ask they said no haha,

Can you show an example how to? as I'm no longer using the textbox to edit my JSON so its just passing a massive JSON string to your module instead.