Wappler overwrites dynamic names

Wappler Version : 6.7.1
Operating System : Windows 11 x64
Server Model: NodeJS
Database Type: PostgreSQL
Hosting Type: Docker

We have a form repeat and in this form repeat we have repeat for radio buttons to be dynamic based on data received from Server Connection action.

<div class="form-check" dmx-repeat:repeat4="serverconnectUserDetails.data.queryDependents.filter(`relationshipID.inRange(12,13)`)||serverconnectUserDetails.data.queryDependents.filter(`relationshipID.inRange(3,9)`)">
	<input class="form-check-input" type="radio" id="selectSplitLivingAnnuitiesDependent_2" name="test" dmx-bind:value="id" dmx-bind:name="'record'">
	<label class="form-check-label" for="selectSplitLivingAnnuitiesDependent_2">{{var1.value}}</label>
</div>

When the page is rendered Wappler:

  1. Uses wrong repeat index from the radio button, but not from the form repeatformRepeatSplitLivingAnnuities[{{$index}}][test]. Maybe even it's by design and we could overwrite with dynamic name, but
  2. Completely ignores dynamic name setting. Follow rendered code bellow.
<div class="form-group mb-3 row" is="dmx-radio-group" id="groupSplitLivingAnnuitiesDependent" dmx-bind:value="0">
	<div class="form-check">
		<input class="form-check-input" type="radio" id="selectSplitLivingAnnuitiesDependent_2" name="formRepeatSplitLivingAnnuities[0][test]" dmx-bind:value="id" dmx-bind:name="formRepeatSplitLivingAnnuities[{{$index}}][test]" is="dmx-radio" value="4">
		<label class="form-check-label" for="selectSplitLivingAnnuitiesDependent_2">0</label>
	</div><div class="form-check">
		<input class="form-check-input" type="radio" id="selectSplitLivingAnnuitiesDependent_2" name="formRepeatSplitLivingAnnuities[1][test]" dmx-bind:value="id" dmx-bind:name="formRepeatSplitLivingAnnuities[{{$index}}][test]" is="dmx-radio" value="5">
		<label class="form-check-label" for="selectSplitLivingAnnuitiesDependent_2">0</label>
	</div><!--Repeat Attribute-->
</div>

And since names of these radio buttons are different - it's not works as intendent.
index_problem

It gets the $index from the closes repeat and that is the one on the checkboxes. To access the $index of the parent repeater you can use a value component and set the $index to an other variable name and access that from the child repeater.

@patrick thank you for a quick response.

Yes, now I know how to access "parent" repeat index (Get Nested repeat index) but problem is - Wappler overrides dynamic name binding so I can't use parent index.
You can see that I set name to be "record" but in rendered code Wappler is not using them.

Just saw it and thought of mensioning it...

  1. wrong use of {{$index}}... Here you don't need the double curly brackets.


    Just use formRepeatSplitLivingAnnuities[$index][test] , no curly brackets

  2. I see the same id but I can't find dmx-bind:id (dynamic ids)

  3. dynamic values are all set to "id"... Is that correct?

  4. Related to No1,
    -we don't know what "test" is and its value
    -First $index and then test... [$index][test]. Is this on purpose?
    I would wait to see:
    [0][0]
    [0][1]
    [0][2]
    [1][0]
    [1][1]
    [1][2]
    [2][0]
    [2][1]
    [2][2]
    [test][$index] , suppose test is the outer repeat's $index value

Thank you for helping, but you didn't get the main problem.

  1. It's not something I did - it's what Wappler generated when page is rendered. I set to use dynamic name attribute to be "record" but Wappler completely ignores that.

Set for dynamic name:


What Wappler generates:

Sorry brother...

Can you share your code?

the word "record" looks like it is reserved from system...
Please try "record1" or "myrecord" to see

(I still don't see dynamic id on your radios...)

FYI this doesn't happen on AC1...
image

image

@famousmag

  1. His code is correct, the formRepeatSplitLivingAnnuities[{{$index}}][test] is being parsed as a template string and is equal to 'formRepeatSplitLivingAnnuities[' + $index + '][test]'. This generates a valid input name that is being accessed on the server like $_POST.formRepeatSplitLivingAnnuities[0].test.

  2. For accessibility I agree that he probably should have dynamic id and for attributes, when you click on the label of the second radio it will select the first due to the duplicate id's. But that has nothing to do with the issue he is describing.

  3. The dmx-bind:value="id" seem correct for me as it is mostly used as a value for inputs.

  4. test is not a value, it is the name for the input, as described in No1 it is a valid way for naming form inputs. Also test is not the outer $index, he expected the $index to be from the outer repeater instead of the current.


The problem is that Wappler input name generator doesn't handle nested repeats nicely and just uses $index always without knowing it is within a different repeat scope. It is also not directly possible to access the parent $index without creating an extra value component which can be referenced.

1 Like

I've tried to create a workaround:

  1. I created a variable within the formrepeat that is holding current form repeat item index: <dmx-value id="var1" dmx-bind:value="$index"></dmx-value>
  2. Then in Radio Group Repeat I set name to be dynamic <input class="form-check-input" type="radio" id="selectSplitLivingAnnuitiesDependent_2" name="record" dmx-bind:value="id" dmx-bind:name="'record'+var1.value">

Unfortunately this approach didn't helped - Wappler overwrites it.

@patrick Is there any chance to see fix/workaround for this or it's better to use different approach like selection element instead of radio group?

My apologies @notum for the mistaken observations buddy...

Thanks @patrick for letting me know!
I had no clue about those techniques

1 Like

When does Wappler overwrite your workaround and which part does it overwrite?

I've explain above, but let me try again:

  1. For Radio I set dynamic name to be dmx-bind:name="'record'+var1.value" var1 holds parent repeat index
  2. When page in rendered - I see that the name for radio is different : name="formRepeatSplitLivingAnnuities[1][test]"

More detailed:

Here is my repeat data

{
"queryGetCountries": [
{
"id": 1,
"country_code": "ZW",
"country_name": "Zimbabwe"
},
{
"id": 2,
"country_code": "ZM",
"country_name": "Zambia"
},
{
"id": 3,
"country_code": "AF",
"country_name": "Afghanistan"
},
{
"id": 4,
"country_code": "AL",
"country_name": "Albania"
}
]
}

Here is my page code:

<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="form" appConnect="local" components="{dmxFormRepeat:{}}" -->
<meta name="ac:route" content="/form">
<dmx-serverconnect id="scGetCountries" url="/api/getCountryList"></dmx-serverconnect>
<div class="container">
    <div class="row">
        <div class="col">
            <button id="btn1" class="btn" dmx-on:click="formOrders.formRepeat.add()">Add Order</button>
        </div>
        <form id="formOrders">
            <div is="dmx-form-repeat" id="formRepeat" dmx-bind:items="1">
                <dmx-value id="varCurrentIndex" dmx-bind:value="$index"></dmx-value>
                <div class="row">
                    <div class="col-12">
                        <div class="row">
                            <div class="col"><input id="textOrderName" name="textOrderName" type="text" class="form-control"></div>
                            <div class="col">
                                <p>{{$index}}</p>
                            </div>
                        </div>

                    </div>
                    <div class="col-12">
                        <div class="form-group mb-3" id="input1_group" is="dmx-radio-group" dmx-bind:value="1">
                            <div class="form-check" dmx-repeat:repeat1="scGetCountries.data.queryGetCountries">
                                <input class="form-check-input" type="radio" value="" id="input1_1" name="input1" dmx-bind:value="id">
                                <label class="form-check-label" for="input1_1">{{country_name}}</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

Result:

radio_group

Thank you for the more detailed example. I was thinking Wappler generated the name expressions but it is actually the form repeat component that does that. Not sure if it will be easy to fix but will have a look at it.

Would be possible to make a lookup and check - if this particular repeat is under form repeat and for the name use form repeat index instead of current repeat index?

I have stopped using the form repeat component (unless I need sorting), instead I'm now using standard repeat or repeat-children ones. I have a bit of extra work in setting up dynamic attributes such as id, for and name but I have full control over them. As a workaround, if the current behaviour is causing you issues at the moment when nesting form components, it is quite effective - at least until @patrick pulls a rabbit out the hat and improves it! :magic_wand: :rabbit: :tophat:

I've updated the code to also generate a $formindex within the scope data which will be used instead of the conflicting $index. That should theoretically solve the problem.

Here the updated file to test: dmxFormRepeat.zip (5.2 KB)

A post was split to a new topic: Default of input group not working within a form repeat