How to clone previous row values to next row in LWC?

Question

I was able implement adding/removing rows dynamically functionality in LWC by following this blog of ADDING/REMOVING ROWS DYNAMICALLY IN LWC.

However, I want to extend the functionality such that whenever you "add row" it will clone all the records from previous row to the next row.

When I mean clone, I mean all the data types like:

• Lookup
• Picklist
• Text
• Number

For example, I want the LWC placed on the Account Record Page and I would do that by doing <target>lightning__RecordPage</target> in the meta.xml. Then to bulk insert contacts, I want it to default the accountId lookup to the particular account record id. And then after I fill up the other fields like Last Name, Industry, Height(m) and press "add row" it will clone all these values to next row.

Answer 1

Note: I am not exactly sure what needs to happen if the user has 2 rows with 2 different sets of values when they click on the add new row button. But I will assume that you want to copy the last row and if you need to you can modify the code below to tailor it to your needs.

Also, I couldn't set up a LWC playground because lightning-record-edit-form doesn't seem to be supported there. Take the code below with a grain of salt and let me know if something is not working so I can test in my sandbox later.

What you need to do is set the value for the lightning inputFields.

Let's take the first field as an example:

<template for:each={itemList} for:item="item" for:index="index">
        <lightning-record-edit-form key={item.id} object-api-name="Contact">
            <lightning-messages> </lightning-messages>
            <lightning-layout multiple-rows>
                <lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
                        padding="around-small">
                    <lightning-input-field field-name="FirstName" variant="label-stacked" required>
                    </lightning-input-field>

What you should do is add a value property to the inputField like so:

<lightning-input-field field-name="FirstName" variant="label-stacked" required value={item.firstName}>

Next you need to make some changes on the JS side as well:

@track itemList = [
    {
        id: 0,
        firstName: ''
    }
];

addRow() {
    let firstNameInputs = this.template.querySelectorAll('lightning-input-field');
    const firstNameValue = firstNameInputs[firstNameInputs.length-1].value;
    ++this.keyIndex;
    var newItem = [{ id: this.keyIndex, firstName: firstNameValue}];
    this.itemList = this.itemList.concat(newItem);
}

Similarly you can work your code to set the other values that you need it to. Now when the new is added JS will check if there's a firstName value for each item from the itemList and if there is one it will prepopulate the firstName field for that row.