Dynamic forms, part II

Continuing the discussion from Wresteling with Spacebars to use Alpaca forms:

turns out, you should be able to do this with autoform… but I am not :slight_smile:
it is even in the demo
I tried building the same code, but I am getting nowhere. (Using coffeescript):

destroyForm = new ReactiveVar(false)
schemaObject = new ReactiveVar(false)
test = new ReactiveVar(true)

Template.author.rendered = () ->
  @.autorun ->
    console.log("in destroy form autorun")
    destroyForm.set(true)
    schemaObject.set({name: {type: String}})

  @.autorun = () ->
    if destroyForm.get() then destroyForm.set(false)

Template.author.helpers
  schemaFromJSON: ->
    new SimpleSchema({name: {type: String}})

as soon as I enter any ReactiveVar, the whole thing barfs:

Error: AutoForm: form with id “demo” needs either “schema” or “collection” attribute

even when I remove all destroyForm - references, when I add “test = new ReactiveVar(true)”, my app crashes. Does ReactiveVar needs another package? What am I missing here? :smile:

Regards,

Paul

Could you please paste in your template code that contains the autoform block helper.

You are probably missing the obvious and not actually declaring the schema attribute.

Hi Serkandurusoy,

yes, of course:

{{#if destroyForm}}
    hier {{! this is a wonky workaround for the fact that autoform doesn't handle reactively changing schema attribute, which should be fixed eventually}}
{{else}}
    daar {{> quickForm id="demo" schema=schemaFromJSON type="method" meteormethod="demoSubmission"}}
{{/if}}

I think I declared it correctly…?
Thank you for your help!

Paul

Hm, interesting. I don’t quite understand what you are trying to achieve with all those autorun blocks by the way. Did you try eliminating them and just using the helper?

No, I did not… :slight_smile: I followed the help-page as good as I could:

http://autoform.meteor.com/quickform

the code for this page is here.

Which is exactly what I want to do: building a form from a JSON-string. I am going to try by deleting all the autorun blocks. I will post the results in this thread. :slight_smile:

This is my code now:

schemaObject = new ReactiveVar({name: {type: String}});

Template.author.helpers
  schemaFromJSON: ->
    new SimpleSchema(schemaObject.get())

template:

<template name="author">
        {{> quickForm id="demo" schema=schemaFromJSON type="method" meteormethod="demoSubmission"}}
</template>

result:
Error: AutoForm: form with id “demo” needs either “schema” or “collection” attribute

:sob:

A assume (working with Meteor for about a week… so… :slight_smile: ) that this is the error that is talked about in the demo-code. But, as described above, the workaround so far is not working for me…

Any suggestions?

Paul

Well, I am getting there… it turned out that ReactVar indeed was a package… strange / confusing that no error was thrown when the code said “new ReactVar”…? I would have expected a error if the package was not available, thus, ReactVar-undefined, I would have guessed…

But at the moment I have:

schemaObject = new ReactiveVar({name: {type: String}})

  Template.author.helpers
    schemaFromJSON: ->
      new SimpleSchema(schemaObject.get())

  Template.author.events
    'click .change’: (event, template)->
      schemaObject.set({test: {type: String}})     

this seems to work, but for one thing! The form updates, but generates an error:
Exception in template helper: Error: Invalid field name: name

Which would suggest that some kind of reset is in order… working on that :smile:

regards,

Paul

Well, that code works.

http://meteorpad.com/pad/oifoHrqmqtZ58s58E/Dynamic%20Quickform%20with%20Autoform

well, allmost :smile:
I’m trying to change the form, with the second JSON. That actually works too, but then the error gets thrown. My theory at the moment is that I need to “reset” the form, in order to delete the previous schema. (Or something, anyway. There is no validation at the moment, otherwise I would say it is that… but there is not, so… )

I am tring to get “AutoForm.resetForm” to do anything usefull, but that is not yet working. (You would hope this would, well, reset the form [duh], and then maybe allow for a new schema to function. Not yet, anyway)

I see. Well the hack in the example provided actually destroys the form by removing it from the DOM.

it is basically a true/false helper that first gets set as false and then gets updated to true. The helper decides which template to render. False is some dummy template and true the form itself. Which means the changing of the helper from true to false to back to true with a new schema definition means that the form actually gets completely destroyed and then recreated with the new properties.

resetForm is a different story. What it does is standard html form reset. Namely, clear whatever values entered into the existing inputs.

To be further able to help you, I need to see a more complete set of your code. That’s why I created the example on meteorpad. You can use it too. So that we can work on the same code, and run it to see if we solved the problem.

:sunglasses: Thank you! I finally got some code working. I thought the destroy-form was doing what you described, but I did not understand fully. It is a bit late here now; I need to go to bed. But I got it working, and will post a working example tomorrow, for further reference - it might help others :smile:

Thank you once again! :beer:

1 Like