How to submit 1 lightning-record-edit-form and run onsubmit method param?

Question

when I use the below code to submit each form, onsubmit={handleSubmit} doesnt run. Why?

<lightning-record-edit-form key={item.id} object-api-name="professionalExperience__c" onsubmit={handleSubmit}>

this.template
        .querySelectorAll("lightning-record-edit-form")
        .forEach(element => {
            alert('ELEMENTO: ' + JSON.stringify(element));
            element.submit();
            alert('post submit SUBMIT');
            
        });

  handleSubmit(event){
        alert('hello');
        event.preventDefault();       // stop the form from submitting
        const fields = event.detail.fields;
        alert(JSON.stringify(fields));
        console.log(fields);
        this.template.querySelector('lightning-record-edit-form').submit(fields);
     }

Answer 1

If you define a custom submit event handler using onsubmit={handleSubmit} within a lightning-record-edit-form, then you need to define a button element (of type='submit') within the record edit form. LWC would then wire this submit button to the custom event handler code. So, on click of the button, a submit event is triggered and the custom event handler code is executed. Within this event handler code, event.detail.fields param holds all the field values that can be updated during runtime.

On the contrary, when you have multiple lightning-record-edit-forms, a single submit/save button with onclick event handler, and the following code in the event handler, the custom event handler defined as onsubmit={handleSubmit} will have no impact because there is no specific button wired up with this handler code.

this.template.querySelectorAll("lightning-record-edit-form").forEach(element => {element.submit();});

Executing the above code does not invoke the custom event handler method because you are not triggering the submit event of the lightning-record-edit-form, but directly calling the public method submit of the record edit form.

I don't see a fields attribute in your code on the lightning-record-edit-form, so assuming that you are using lightning-input-fields in your component. Possible solution to your problem is to access the input fields directly in your code. For example, if you had the lightning input field defined as <lightning-input-field field-name="Name"></lightning-input-field>, then you can access this specific field as shown in the sample code below.

const inputFields = this.template.querySelectorAll('lightning-input-field');
    
if (inputFields) {
   inputFields.forEach(field => {
        if(field.name === "Name") {
            // Do something here with the field
        }
    });
}

If you have same field in other lightning record edit forms, then you may use data-* attributes. For example, if you had the lightning input field defined as <lightning-input-field data-id="Name1" field-name="Name"></lightning-input-field>, then you can access this specific field as shown in the sample code below.

const inputFields = this.template.querySelectorAll('lightning-input-field');
    
if (inputFields) {
   inputFields.forEach(field => {
        if(field.dataset.id === "Name1") {
            // Do something here with the field
        }
    });
}

Alternatively, you may also use onchange event handler of the lightning-input-field and manage the values on the input fields.

You may also use the data-attributes at record edit form level, if you want identify and control the submission of the record data. Disclaimer: I've not tried to replicate you problem and test this solution at my end, but it should work.