How can I create a HTML formula on a button click


Hello @all,

i want to create a compatible ionic formular when a button is clicked.
Therefore I have a click method for the button in the .ts file.
The new form should be created in a div-tag, so I search for the tag by using the DOM. If I call .innerHTML in my click Method with the parameter of the HTML-Formular, the result ist not a compatible ionic formular.

Paramerter e.g.:

<ion-input type=“number” [(ngModel)]=“mobileCosts” formControlName=“mobileCostsInput” [min]=“0” placeholder=“0”>

Do you know how can I create a form using a Button click ?


I am also new to ionic. The first thing people teached me is: Do not touch the dom, if it is not neccessary and it is mostly not nessecary. Angular will do this for you.

How would you show your form? You can put your form for example on a page and show it as modal. This is a often used way, because you can validate it before you dismiss it.

You can also create an html element, custom component with a binding with [hidden]=… and your button click set the property that [hidden] use to false.

Or you use ngif etc. to insert it or not.

Best regards anna-liebt.


i dont suppose to do create new form on button click
i prefer hide and display the div tag or form
you can use *ngIf in div tag to display or hide the whole form.
you just have to set a boolen varible to true on button click and use that variable in ngIf
simple !!!


Thank you both for your answer.
Could you give me a hint how to configure a binding that if a button is click multiple there will be shown the the form multiple times (as often as the button was clicked)?

Thank you a lot:)


This makes no sense on a phone-sized screen. What is the user experience you are trying to create?


I want to calculate multiple alternatives investmtens of costs. Therefore I am trying to use one form for one invest. When a new form would be added, I would close the other one in a div, so it would be not open on the screen of the device.


Why can’t you use a modal? That’s a common way to get form input on a handheld device. I don’t see why the form should be on the same page unless your user is on a desktop or a tablet.


I am using 3 tabs for my tools, right now.
The first Tab contains the stocks which are recorded.
The second tab contains the investment and the third tab contains the rent/taxes and useful life of the investment.
The input data is handled by a provider from tab to tab, at last I generate a modal with a chart of the tabs before.

Now I want to create a additional form, which is handled by the provider, also.
This principle already works fine for one form, so there wouldn’t be much to rewritten in the code. (I hope so)