Meteor dynamic form generation

Question

I have a survey form I would like an admin to be able to add more questions to on the fly. The way I'm thinking of doing this is to have the admin add questions to a Questions collection with several properties e.g:

{
    "description" : "desc",
    "fieldType" : "textField",
    "sortOrder" : 1,
    "dataType" : "text",
    "_id" : "eFopP8XFgY8Br93fA"
}

and then on the client side, loop through these using an #each block and a dynamic template like so:

{{#each questions}}
  {{>Template.dynamic template=fieldType}}
{{/each}}

Now the "fieldType" field would correspond to the name of a stored template e.g

<template name="textField">
    <div>
        <input id="{{_id}}" type="{{dataType}}" class="validate">
        <label for="{{_id}}">{{description}}</label>
    </div>
</template>

and inside these templates would have different input fields depending on the type.

I have two issues:

Is this a good way to go about this problem?
If it is, how would you be able to get the values of these input fields when saving the answers (as we don't know what fields could be there at compile time)

Have you thought about using a package such as aldeed:autoform? — Kyll
Yeah I use autoform for some aspects but I don't think autoform fits this particular problem because in autoform the schema is decided in advance whereas in this scenario the admin could change the schema while the app is running. — Jon

Mahmoud Metwally Mahmoud Metwally · Accepted Answer · 2015-03-25T00:13:05

Regarding your first question, I agree with @Kyll regarding autoform and I think you can pass the schema as a json object dynamically.

Regarding your 2nd question, please check SO question Dynamically add form fields in meteorjs where you will find answer to your second question. You can easily grab value of all fields in your dynamically created form using .serializeArray() JQuery serializeArray

Meteor dynamic form generation

1 Answers