Nested Form Repeat Parent/Child Index Format

Wappler General Need Help
1

I have a form repeat with a nested form repeat and am having trouble getting the name/index to format correctly, which then makes the data from the child repeat insert into the db as an array based on each index of each child repeat instead of each as their own value on a separate row.

I have scoured every portion of the forums here and the documentation for this and in trying what I have seen to be the most commonly suggested solution for this it is not working as expected, so it is making me think that because most of these topics are 2+ years old there has been a change to how this works within Wappler and so maybe are not relevant anymore?

What I have seen most commonly suggested is in code line for the input(s) of repeat1 add dmx-bind:name"repeat1[{{$index}}]variableName" and of repeat2 “repeat1[{{parentIndex.value}}][repeat2][{{$index}}]variable2Name” (also tried $parent.$index to no avail). When I do this and view in devtools it outputs correctly, like this:

repeat1[0][varName1]:
repeat1[0][varName2]:
repeat1[0][repeat2][0][varName3]: A
repeat1[0][repeat2][0][varName4]: B
repeat1[0][repeat2][1][varName3]: C
repeat1[0][repeat2][1][varName4]: D
repeat1[1][varName1]:
repeat1[1][varName2]:
repeat1[1][repeat2][0][varName3]: E
repeat1[1][repeat2][0][varName4]: F
repeat1[1][repeat2][1][varName3]: G
repeat1[1][repeat2][1][varName4]: H

which should result in the db as:
ID__Ref_ID__Value
1_____0_____A
2_____0_____B
3_____0_____C
4_____0_____D
5_____1_____E
6_____1_____F
7_____1_____G
8_____1_____H

but then the post variables linked to the page form do not generate as expected, and when looking at each variables linked field, each has readded the repeat and index again on the front, resulting in this:

repeat1[0]repeat1[0][varName1]:
repeat1[0]repeat1[0][varName2]:
repeat2[0]repeat1[0][repeat2][0][varName3]: A
repeat2[0]repeat1[0][repeat2][0][varName4]: B
repeat2[1]repeat1[0][repeat2][1][varName3]: C
repeat2[1]repeat1[0][repeat2][1][varName4]: D
repeat1[0]repeat1[1][varName1]:
repeat1[0]repeat1[1][varName2]:
repeat2[0]repeat1[1][repeat2][0][varName3]: E
repeat2[0]repeat1[1][repeat2][0][varName4]: F
repeat2[1]repeat1[1][repeat2][1][varName3]: G
repeat2[1]repeat1[1][repeat2][1][varName4]: H

and instead results in the db as:
ID__Ref_ID__Value
1_____0_____A,E
2_____0_____B,F
3_____0_____C,G
4_____0_____D,H
5_____1_____A,E
6_____1_____B,F
7_____1_____C,G
8_____1_____D,H

I have also tried changing the name and/or id of the repeat 2 where it has its parent index attached to its beginning, which also didn’t work, as it just removes the array brackets and generates a string of the name of whatever you are trying to reference.

Is some way to prevent this from happening, where the repeat id is automatically added to the beginning of the input name in SC, or some other way of achieving this that I am missing? I know I could add a couple hidden inputs and reference each, but based on how frequently I have read this being a common problem, I figure there is probably a more straight forward solution that I am missing.

2

@Msj1542 - did you ever get any farther with this? I have a use case where I am running into the exact same issue.

3

I did get it working, but I cant recall exactly what change(s) I made to do so. Let me look at it here in a while, or this evening, and will let you konw!

1 Like
4

That would be so helpful thank you!!

5

Hey @Msj1542 - just wanted to follow up to see if you ever saw your method! We wound up editing the source code to accomplish this, in addition to adding a custom class. This is not a very stable change since we edited the source… would love to see if your method is simpler / more stable!

6

Here is what we updated the dmxFormRepeat.js to be in order to give us back what we needed, in case anyone is curious:

/*!
 Form Repeat
 Version: 1.0.1
 (c) 2022 Wappler.io
 @build 2022-08-18 10:34:49
 */
dmx.Component("form-repeat", {
    initialData: {
        canAdd: !0,
        items: []
    },
    attributes: {
        items: {
            type: [Array, Number],
            default: 0
        },
        min: {
            type: Number,
            default: 0
        },
        max: {
            type: Number,
            default: 1 / 0
        },
        sortable: {
            type: Boolean,
            default: !1
        },
        handle: {
            type: String,
            default: null
        },
        animation: {
            type: Number,
            default: 0
        }
    },
    methods: {
        add: function () {
            this._add()
        },
        remove: function (e) {
            this._remove(e)
        },
        move: function (e, t) {
            this._mode(e, t, !0)
        },
        moveToStart: function (e) {
            this._move(e, 0, !0)
        },
        moveToEnd: function (e) {
            this._move(e, this.children.length - 1, !0)
        },
        moveBefore: function (e) {
            this._move(e, e - 1, !0)
        },
        moveAfter: function (e) {
            this._move(e, e + 1, !0)
        },
        duplicate: function (e) {
            this._duplicate(e)
        },
        reset: function () {
            this._render()
        }
    },
    render: function (e) {
        this._template = this._templateFromChildren(e);

        let pathToRoot = [];
        let currElem = e;
        let closest;

        while (currElem) {

            closest = currElem.closest(".form-repeat");

            if (closest) {

                let currPos = 0;
                let prevSibling = closest.previousElementSibling;

                while (prevSibling) {
                    prevSibling = prevSibling.previousElementSibling;
                    currPos += 1;
                }

                pathToRoot.push([closest.parentNode.id, currPos]);

                currElem = closest.parentNode;
            }

            else {
                currElem = null;
            }

        }

        console.log(pathToRoot);

        const prefix = pathToRoot.length > 0 ? pathToRoot[0][0] + "[" + pathToRoot[0][1] + "]" : ""

        this._template.querySelectorAll("input[name], select[name], textarea[name]").forEach((e => {
            const t = e.name.indexOf("[");

            const name = prefix ? prefix + `[${this.name}]` : this.name;

            t > 0 ? e.setAttribute("dmx-bind:name", name + "[{{$index}}][" + e.name.slice(0, t) + "]" + e.name.slice(t)) : e.setAttribute("dmx-bind:name", name + "[{{$index}}][" + e.name + "]")
        })), this.update({})
    },
    update: function (e, t) {
        dmx.equal(e.items, this.props.items) || this._render(), e.sortable != this.props.sortable && (this.props.sortable ? this.sortable ? this.sortable.option("disabled", !1) : window.Sortable ? this.sortable = Sortable.create(this.$node, {
            handle: this.props.handle,
            onEnd: e => this._move(e.oldIndex, e.newIndex)
        }) : console.warn("Sortable script is missing.") : this.sortable && this.sortable.option("disabled", !0)), e.handle != this.props.handle && this.sortable && this.sortable.option("handle", this.props.handle), e.animation != this.props.animation && this.sortable && this.sortable.option("animation", this.props.animation), dmx.equal(e, this.props) || this._refresh()
    },
    _render: function () {
        const e = dmx.repeatItems("string" == typeof this.props.items ? Number(this.props.items) : this.props.items);
        e.length < this.props.min && (e.length = this.props.min), e.length > this.props.max && (e.length = this.props.max), this._clear();
        for (let t = 0; t < e.length; t++) this._add(e[t])
    },
    _duplicate: function (e) {
        this._add(), this._move(this.children.length - 1, e + 1, !0);
        let t = [];
        this.children[e].$nodes.forEach((e => {
            1 == e.nodeType && t.push(...Array.from(e.querySelectorAll("input[name], textarea[name], select[name]")))
        }));
        let i = [];
        if (this.children[e + 1].$nodes.forEach((e => {
            1 == e.nodeType && i.push(...Array.from(e.querySelectorAll("input[name], textarea[name], select[name]")))
        })), t.length == i.length)
            for (let e = 0; e < t.length; e++) {
                const n = t[e],
                    s = i[e];
                if (n.tagName != s.tagName) break;
                if ("TEXTAREA" == n.tagName) s.value = n.value;
                else if ("INPUT" == n.tagName) {
                    if ("file" == n.type || "password" == n.type) continue;
                    "checkbox" == n.type || "radio" == n.type ? s.checked = n.checked : s.value = n.value
                } else if ("SELECT" == n.tagName)
                    if (n.multiple)
                        for (const e of n.selectedOptions)
                            for (const t of s.options) e.value == t.value && (t.selected = !0);
                    else s.value = n.value;
                s.dispatchEvent(new Event("change"))
            }
    },
    _add: function (e = {}) {
        if (this.children.length >= this.props.max) return;
        const t = new (dmx.Component("repeat-item"))(this._template.cloneNode(!0), this, e);
        t.$nodes.forEach((e => {
            this.$node.appendChild(e), t.$parse(e)
        })), this.children.push(t), this._refresh()
    },
    _remove: function (e) {
        this.children.length <= this.props.min || (this.children.splice(e, 1).forEach((e => {
            e.$destroy()
        })), this._refresh())
    },
    _refresh: function () {
        this.children.forEach(((e, t) => {
            e.set({
                $index: t,
                $canRemove: this.children.length > this.props.min,
                $canMoveToStart: t > 0,
                $canMoveBefore: t > 0,
                $canMoveAfter: t < this.children.length - 1,
                $canMoveToEnd: t < this.children.length - 1
            })
        })), this.set("canAdd", this.children.length < this.props.max), this.set("items", this.children.map((e => e.data)))
    },
    _clear: function () {
        this.children.splice(0).forEach((e => {
            e.$destroy()
        })), this.$node.innerHTML = ""
    },
    _move: function (e, t, i) {
        e < 0 || e >= this.children.length || t < 0 || t >= this.children.length || (this.children.splice(t, 0, this.children.splice(e, 1)[0]), i && (this.$node.innerHTML = "", this.children.forEach((e => {
            e.$nodes.forEach((e => {
                this.$node.appendChild(e)
            }))
        }))), this._refresh())
    },
    _templateFromChildren: function (e) {
        const t = document.createDocumentFragment();
        for (; e.hasChildNodes();) t.appendChild(e.firstChild);
        return t
}
});
//# sourceMappingURL=../maps/dmxFormRepeat.js.map
7

I have noticed that dmx-form-repeat is automatically translated in array on the payload and auto-handling the $index values…
I accomplished something similar with dmx-repeat instead.
Once you handle your $index manually (as you say) I suggest you giving it a try using dmx-repeat.
(of course I suggest you to keep a back-up before changing your code)

8

@famousmag so just don’t use form repeat at all, and instead make a repeat region that includes a form?

9

@Msj1542 just wanted to check in again one more time on this, especially with Wappler 6 coming and the instability of this solution :slight_smile: Any insight you have would be much appreciated!

10

If I understand your qustion correctly:

The form was already the parent of your form-repeat, right?
So, no more forms inside the dmx-repeat.
Just place your inputs inside the dmx-repeat and give it a try

**(first backup your files in case it doesn’t wok for you).

11

@ckunderd I just had a use case for this and it was driving me nuts. Finally cracked the code. It's actually pretty simple once I stopped overthinking it haha.
The parent form repeat stays the same. Inside the parent form repeat put a variable to store the parent's index. Then don't use another form repeat inside the parent form repeat, use a regular repeat. Then for the inputs, bind the name as I have in my example. IMPORTANT make sure the child repeat inputs do not have the regular name="" tag or Wappler seems to ignore the bind. That was driving me crazy till I figured out to remove that on one of the fields that wasn't nesting properly on submit.

//PARENT FORM REPEAT
<div is="dmx-form-repeat" id="formRepeat" dmx-bind:items="items">
<dmx-value id="varParentIndex" dmx-bind:value="$index"></dmx-value>

//CHILD REGULAR REPEAT
<div dmx-repeat:repeatoptionvalues="2">
<div class="form-check">
 <input class="form-check-input" type="checkbox" value="1" id="inpOverrideGlobalValue"  dmx-bind:checked="id" dmx-bind:name="'formRepeat['+varParentIndex.value+'][field_name]'">
</div>
</div>
</div>

Hope this helps.

-Twitch

12

have a similar use case - but need ability to sort as well.
so we need to use one form repeat nested inside the other to allow for sorting.

any ideas on how we can achieve this?

14

This has been fixed, the form repeat now has its own unique $formindex variable to prevent clashes with $index.

2 Likes
16

NodeJS, Mac M1 Max, AC2 Stable

I am having a similar issue to above. @patrick was this fix meant to allow using this type of structure

<!-- Nested Form Repeats -->
<div is="dmx-form-repeat" id="formRepeatA" dmx-bind:items="2" min="1">
  <input id="inp_parent_a" name="parent_a" type="text">
  <div is="dmx-form-repeat" id="formRepeatB" dmx-bind:items="4" min="1">
    <input id="inp_child_b" name="child_b" type="text">
  </div>
</div>

And the payload for this should be as follows

formRepeatA[0][parent_a]
formRepeatA[0]formRepeatB[0][child_b]
formRepeatA[0]formRepeatB[1][child_b]
formRepeatA[0]formRepeatB[2][child_b]
formRepeatA[0]formRepeatB[3][child_b]
formRepeatA[1][parent_a]
formRepeatA[1]formRepeatB[0][child_b]
formRepeatA[1]formRepeatB[1][child_b]
formRepeatA[1]formRepeatB[2][child_b]
formRepeatA[1]formRepeatB[3][child_b]

i am trying to either nest 2 form repeats inside eachother, or a repeat children with a form-repeat nested in that.

Loading the above structure in server connect adds all the form-repeats at the base level without nesting as well

17

I decided to ask ChatGPT to try and repair this issue for me, and well it seemed like it knew exactly what it was doing, it broke pretty much everything, lol. I have reverted my html as well as the dmxFormRepeat.js back to their original files rather and I am back to where I started, thank you Wappler for making far better code than AI.