I'm using a Repeater to display a Form for each item in an ArrayCollection called propertiesArray.
There is a 'Save' button, which should combine each form's values into an object, which will then replace its corrresponding property object in propertiesArray.
Currently, the 'Save' button loops through each child (each Repeater instance) and executes saveUserInput() on each one. This saveUserInput() function is located inside the Repeater component and combines the required data into an object and fires a custom event to save it.
The problem is, once the first Form has had saveUserInput() called, the propertiesArray is updated so the Repeater refreshes as it is bound to propertiesArray. This causes any forms after the first form to have all their children (TextInputs etc) reset to default values before they can be saved, so all user input is lost.
What would be the best way to create multiple Forms, each bound to an individual object in propertiesArray? The propertiesArray is dynamic and of unknown length.
Thanks in advance for any suggestions,
Solved my own problem:
Instead of the Repeater, I used a this.addChild loop to add each form, and at the same time passed each form it's corresponding object.
Inside the form, I used ObjectUtil.copy(propertyObject) to create a copy of it, rather than a reference to it, so that when the main propertiesArray is updated it doesnt wipe any forms which are bound to that ArrayCollection.