Clear forms or access data in elements inside Listviews

Dear Community:

I have a list view (the new one) in where I add a form.

I would like to add a button to clear all values in all forms.

When I run:

rateForm.clear()

Only the first form clears.

I have tried doing something like (its a nested list view):

for (let i = 0; i < rates.value.length; i++) {
  rateForm[ri[0]][ri[i]].clear()
}

But I get the message: "Cannot read properties of undefined (reading 'undefined')"

Any idea what I am doing wrong? Or if this is supported with the new version of list view?

This is what I see in the form state:

image

I need to find a way to do this.... please help! I can't find a way to clear the inputs, even though I set the initial input values to be the rates values. Once I change the input, it doesn't reset!

Update:

I have come to the conclusion that there is NO WAY to acces a specific component inside a list view such as form[1].clear(). When i print rateForm as console.log(rateForm), it only prints 1 form.

I can only clear each form in each iteration with a button. There is NO WAY to clear all of them at once... I will have to use the legacy listView

Sadly yes that is true.

They changed the new List View to prohibit external referencing of the listview data (so they can optimise performance). :face_with_raised_eyebrow:

It means the listview is a bit of a strange component, it is not "table-like" as the old one was. I'm yet to work out if the new one fits my use case. Good luck with your apps!

1 Like

Just if anyone stumbles with this problem, this is the solution that I found.

As the form is filled with the default value set-up from a variable, if I change the value in the input, this new value stays set in this input. I had implemented the option to delete a row but the next row that took the deleted row's place had its input values replaced with the deleted row's values.

What I did was:

  • There is a variable that mimics the listView values. So listView values are read-only.

  • On each input of listView: add scripts that runs "on change" to edit the source variable example: rates.setIn([ri[0], "variable", i, "variable1"], variable1Input.value)

  • In this same script, I add rateForm.clear, which runs only for the row which you are editing. This clears the input hard-coded value and it is filled with the same value that you just updated, just not hard-coded.

  • As the value in the input isn't hard-coded, when you delete a row, reset values or whatever; the inputs are filled with the values from the variable.