Addable / deletable / sortable nested forms containing dynamic templates.

[7ammer]

Hello :)

I'm trying to create a form where you can add / delete / sort an array of dynamic forms.

I have managed so far to create a form that renders an array of dynamic forms. I can also add to the end of the form array as well. Unfortunately though I'm having quite a bit of trouble with the deleting and sorting of the form.

Here is a repo of the work so far: https://github.com/7immy/dynamic-nested-array-forms. I'd be grateful if you could take a look :)

The form starts having issues when you try and remove an array item from the form.
If you try to delete an item from the array then changes you have already made on the form will not be kept. Another issue is if there are 2 array items next to each other with the same dynamic template name and the first one gets deleted then the second one wont get updated and holds the first array item's data.

I think the issue is I'm not correctly reactively updating the array of data so that it effects the whole form.

Below shows the adding and deleting actions for quick reference:

Template.dynamicLayoutArray.events({
    "click [data-add-item]": function(evt){
        var current = Template.instance().reactiveForms.newRemoteValue.get();
        current.push({compName: evt.currentTarget.value});
        Template.instance().reactiveForms.newRemoteValue.set(current);
    },
    "click [data-remove-item]": function(evt, t){
        var current = Template.instance().reactiveForms.newRemoteValue.get();
        current.splice(evt.currentTarget.value, 1);
        Template.instance().reactiveForms.newRemoteValue.set(current);
    }
});

Its a big ask but it would be awesome to get some help or advice on this :)

[Kshatra]

It seems that this package has no means to deal with arays of objects, especially dynamic- even if you manage to get correct validation, the internal data will be a mess. You should create your own external array of objects (objectList) to store each field's value and update it on form input change. And in element definition that represents object list validationEvent() returns that external array.
To get proper behavior for removing array item define a var in each element template that overrides the internal's data value, so you can pass data from objectList.