Add multiple rows in Lightning component

Question

I am new to lightning. I have one requirement and I am not sure how to achieve it. any help is appreciated. Requirement is : we have to build custom lightning component, where in user will key in few details. User can also click on (+) button to add new row below the existing row and user should be able to key in other set of records, like wise user can add multiple rows dynamically and click of (-) will remove the inline row. On click of (save) button all the info should be saved at backend. below image is just the mock up that I need to develop. The input data the user is keying in can be of any object(Standard/ custom) or can be wrapper class type based on the information we want the user to key in. but it will only one either of two.

Answer 1

You can use the following example -> Handler change not working with attribute updated inside aura:iteration

Then behind "+" and "-" buttons, update the value of SomeList , then the screen will automatically be rerendered so if u removed an element, it will disappear, and if you added one it will appear :)

Answer 2

This is precisely what you want.

Answer 3

You can try and build a wrapper Class with your Input 1,2,3,4,.. and then try to bind a List of CustomWrapperClass Objects with an <aura:iteration items="{!v.myCustomWrapperObjectsList}">.

Whenever user adds a new row, all you need to do is call a custom method from controller and refresh your List<CustomWrapperClass>.

Now whenever the user hits the 'Save' button all you need to do is call an action and invoke an Apex method where you pass this List<CustomWrapperClass> as a parameter and save/commit the data in your custom object or wherever you need it.

Please read on aura:iteration docs from Salesforce if you need help.

Also comment if you need help in structuring your code.