Unable to save on handleSubmit in a lightning-record-edit-form component

Question

I'm having an issue trying to save a record I'm creating using LWC.

I have a "lightning-record-edit-form component" tag with its "onsubmit" and "onsuccess". Both execute properly if I let them do their job without any extra functionality.

But, I want to fill some fields before submitting, so, I add the

event.preventDefault();

statement and with

const fields = event.detail.fields;

I get the fields where I'm going to change the values. For example;

fields.Extra_data__c = 'Something';

When trying to submit this fields with

this.template.querySelector('lightning-record-edit-form').submit(fields);

I get an exception I'm unable to catch (I'll paste the error code at the end)

This is not the first component where I save this way, and trying to figure what is happening I found this in hopes it may help to find a reason.

In my previous component, when I print to the console the "fields" variable, I receive the fields of the object with empty values, but in this one the field variable is an empty array. Trying to fill any fields will mantain that variable empty. Submitting this will create the mentioned error.

I've tried refreshing and resetting the fields by calling

template.querySelector('lightning-record-edit-form');

But with no luck.

I'm completely stuck with this situation. Hope I can find some help. Thank you very much!

[NoErrorObjectAvailable] Script error.
a()@https://static.lightning.force.com/cs84/auraFW/javascript/UTUQWDA6y0FkeUe3edmJrQ/aura_prod.js:929:169
{anonymous}()@https://static.lightning.force.com/cs84/auraFW/javascript/UTUQWDA6y0FkeUe3edmJrQ/aura_prod.js:929:362
g.dispatchEvent()@https://static.lightning.force.com/cs84/auraFW/javascript/UTUQWDA6y0FkeUe3edmJrQ/aura_prod.js:3:25135
g.handleSubmit()@https://sandbox-orgname.lightning.force.com/components/interop/recordEditForm.js:2:8135

The LWC, I've removed all the input fields but one, all them have the same behaviour;

HTML

<template>
    <lightning-record-edit-form object-api-name="Case" onsuccess={handleSuccess} onsubmit={handleSubmit}>
             <lightning-input-field field-name="TXT_Street__c" name="street" onchange={assignFieldValue} value={caseVars.street}></lightning-input-field>
    </lightning-record-edit-form>
</template>

JS

assignFieldValue(event)
{
     this.caseVars[event.target.name] = event.detail.value;
}

handleSubmit(event)
{
     event.preventDefault();
     const fields = event.detail.fields; // It should have case fields, but is empty
     fields.street= this.caseVars.street; 
     this.template.querySelector('lightning-record-edit-form').submit(fields);
}

handleSuccess(event)
{
     console.log('This is your case Id: ' + event.detail.id);
}

Answer 1

Using event.stopPropagation() instead of event.prevenDefault() works for me:

  handleSubmit(event) {
    event.stopPropagation();

    const fields = event.detail.fields;
    fields.Custom__c = custom;
    this.template.querySelector("lightning-record-edit-form").submit(fields);
  }

Answer 2

1. This 'this.caseVars[event.target.name]' should be 'this.caseVars[event.currentTarget.name]'.

2. Here fields.street, is street a custom field?

3. There could also be some permission issue..!! Maybe Case object isn't accessible to your user!?

Answer 3

Regrettably, the only solution I have found is to recreate the LWC itself. I do not know why but after this, with the same exact code, the component worked with the expected behaviour.

I can not consider this to a proper solution, but I hope it works to anyone that encounters this same issue.

Thank you everyone.