When saving a record, my input fields should is replaced with empty value (clear the text field) and I am having issue with the one within the iteration. I have 2 inputs that are not part of the iteration and a couple of dynamic one that are in the iteration that seems to be not working as intended.
Html:
<template for:each={contentArray} for:item="field" for:index="index">
<tr key={keyIndex}>
<td scope="col">
{index}
</td>
<td scope="col">
<lightning-input value={field.Name} data-index={index} access-key={index} type='text' name="fieldName" onchange={changeHandler}>
</lightning-input>
{index}
</td>
<td scope="col">
<lightning-input value={field.Description__c} data-index={index} access-key={index} type='text' name="fieldDescription" onchange={changeHandler}>
</lightning-input>
{index}
</td>
<template for:each={field.amountC} for:item="field2" for:index="index2">
<td key={keyIndex2} scope="col">
<lightning-input value={field2.Amount__c} data-index={index2} access-key={index} type='text' name="fieldAmount" onchange={changeHandler}>
</lightning-input>
{index}-{index2}
</td>
</template>
<td scope="col">
<lightning-icon icon-name="action:delete" access-key={index} size="small" title="large size" onclick={removeRow}>
</lightning-icon>
</td>
</tr>
</template>
js
changeHandler(event){ console.log(JSON.stringify(this.contentArray));
if(event.target.name=='fieldName'){
this.contentArray[event.target.accessKey].Schedule__c = 'a0h8A000005Tuz8QAC';
this.contentArray[event.target.accessKey].Name = event.target.value;
}
else if(event.target.name==='fieldDescription'){
this.contentArray[event.target.accessKey].Description__c = event.target.value;
}
else if(event.target.name==='fieldAmount'){
this.contentArray[event.target.accessKey].amountC[event.target.getAttribute("data-index")].Amount__c = event.target.value;
console.log(event.target.getAttribute("data-index"));
}
}
saveMultipleRecords() {
saveRecords({ recList : this.contentArray })
.then(result => {
this.message = result;
this.error = undefined;
console.log(this.contentArray);
debugger;
this.contentArray.forEach(function(item){
item.Name='';
item.Description__c='';
for(var i=0;i < item.amountC.length;i++){
console.log(contentArray);
item.amountC[i].Amount__c = '0';
}
/*item.amountC.forEach(function(item2){
item2.Amount__c='0';
});*/
});
console.log(contentArray);
if(this.message !== undefined) {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Records Created!',
variant: 'success',
}),
);
}
})
.catch(error => {
this.message = undefined;
this.error = error;
this.dispatchEvent(
new ShowToastEvent({
title: 'Error creating records',
message: error.body.message,
variant: 'error',
}),
);
console.log("error", JSON.stringify(this.error));
});
}
What am I doing wrong?
Thanks