How to generate form elements dynamically?

Ionic Framework ionic-v3
1

Hi,

I’m banging my head around this issue for so long. I’m new to this ionic 2.

I want to insert form elements like textbox, or radio button, checkbox etc. based on the value that I get from the server.

In HTML & JQuery, I was doing like this:

$("#a").html("<div id='div1'><input id='text' type='text' /> ....</div>");

And in jquery, for example:

$("#div1").on("(event)",function(){

.... Some code .....

});

Please show me a way, to do like this or other ways to achieve this kind of function.

2

please do not use jquery for that…

write a generic form component that creates the form. You may pass the form config per @Input to that form component. If the form is submitted --> you could trigger a @Output to inform your main component to handle the new data.

Annnnnd you could use already really good projects to solve this problem:

3

I wasn’t using JQuery, I just gave an example. But I wanted what you have suggested. I’ll try and get back. Thank you.

4

I tried it, It works perfectly while I run in ionic lab. But when execute run to my android device, it shows an error:

Uncaught Error: Cannot find module “…/node_modules/ng2-formly/lib/core/components/formly.group.ngfactory”, http://.../build/main.js, Line: 25

Please can you help me with this?

5

This is the error I’m getting after doing many things:

[12:08:57] Error: Template parse errors:
[12:08:57] Can’t bind to ‘model’ since it isn’t a known property of ‘formly-form’.
[12:08:57] 1. If ‘formly-form’ is an Angular component and it has ‘model’ input, then verify that it is part of this
module.
[12:08:57] 2. If ‘formly-form’ is a Web Component then add “CUSTOM_ELEMENTS_SCHEMA” to the ‘@NgModule.schemas’ of this
component to suppress this message.
[12:08:57] (" Say hello to: <input [value]=“name” (input)=“name = $event.target.value”>
[12:08:57] Can’t bind to ‘fields’ since it isn’t a known property of ‘formly-form’.
[12:08:57] 1. If ‘formly-form’ is an Angular component and it has ‘fields’ input, then verify that it is part of this
module.
[12:08:57] 2. If ‘formly-form’ is a Web Component then add “CUSTOM_ELEMENTS_SCHEMA” to the ‘@NgModule.schemas’ of this
component to suppress this message.
[12:08:57] ("to: <input [value]=“name” (input)=“name = $event.target.value”>
[12:08:57] ‘formly-form’ is not a known element:
[12:08:57] 1. If ‘formly-form’ is an Angular component, then verify that it is part of this module.
[12:08:57] 2. If ‘formly-form’ is a Web Component then add “CUSTOM_ELEMENTS_SCHEMA” to the ‘@NgModule.schemas’ of this
component to suppress this message. ("e}}!
[12:08:57] ngc failed
[12:08:57] ionic-app-script task: “build”
[12:08:57] Error: Error