0

We have a picklist field displayed using lightning combobox & standard record edit form which will run a iteration against collection of records and display various fields of that object in edit mode for user to update.

Every-time the picklist value is changed, records are filtered and all the fields are displayed in edit mode.

Users have an option to filter the records based on the picklist selection and fill in data for any input field before submitting the form. At this point, values filled by user at any given time should be persistent until the form is submitted.

Based on various given examples, I will have to pass index for every row to capture exact input change however haven't been able resolve it.

Get value of lightning-input and lightning-combobox from for loop in LWC

LWC create input fields under LWC iteration

Code:

LWC Component (included only 1 input field for explanation) -

<lightning-combobox value={value} options={options} onchange={handleChange}/>

<template for:each={results} for:item="res" for:index="index">
  //skipping record edit form declaration here
 <div data-index={res.Id}>
   <lightning-input-field field-name="customField__c" value={res.inputVal} 
                          onchange={handleInputChange} data-index={res.Id}/>
 </div>
 </template>

Controller JS:

   @track results =[];
    //skipping code .... wire service will initially populate 'results' with list of object records.

handleInputChange(event){
       this.results[index].inputVal = event.detail.value; // not working

      //tried to iterating all input field tags and assigning the 'results' array.
      let updatedValues =this.template.querySelectorAll('lightning-input-field');
        for(let i=0;i<updatedValues.lenght;i++){
           this.results[i].inputVal = updatedValues[i].value;
    }

Mockup -

enter image description here

2
  • What is index in your handleInputChange function? From your question, it's really hard to tell what the actual problem is.
    – Nick C
    Commented Jan 17, 2023 at 23:23
  • index will be unique key for every record/field. One of the approach we have been trying is to pass the index from component itself however it is not working - <lightning-input-field onchange ={(event) => handleInputChange(event,index)}>
    – user126869
    Commented Jan 18, 2023 at 0:27

1 Answer 1

0

onchange will have a target that you use to get the data:

this.results[event.target.dataset.index][event.target.fieldName] = event.target.value;

As long as you have your results set up correctly, all of the data that's been edited will be stored there for you to save to the server when you're ready. You don't need to query the DOM to get all the input elements, just keep track of them. Note that the template itself will need to show the filtered list of records, so you'll want two different lists of records.

I wrote up a very simple example that demonstrates how to keep track of the underlying data. You'll see that you simply need to have a filtered list in order to show just the values you want. Of course, you could also use the class slds-hide if you still want to see the elements in the DOM. There's several ways to do it in an efficient manner, it all depends on your use case.

P.S. Don't use lightning-record-edit-form to submit bulk records, as this will cause a significant performance problem after about 40 records. If you need to potentially update many records at once, use Apex instead.

Demo.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .