lightning-record-edit-form submit issue

Question

I'm trying to iterate over lightning-record-edit-form to update a list of records 1 at a time. It works great until I hijack the submit to change fields before submitting. I've used querySelector to submit a form like this before when I only had one form. I thought I could drop a data-id on the lightning-record-edit-form and be able to access it with querySelector but it doesn't save the changes. It does fire onsuccess though. Any ideas on how to get this working?

I was thinking of just calling the controller to save if there's no way to get the form submit to fire

js

handleSubmit(event) {
    let recordId = event.currentTarget.dataset.id;
    console.log('--------handleSubmit--------', recordId);
    event.preventDefault(); // stop the form from submitting
    const fields = event.detail.fields;
    console.log('--------fields----1----', JSON.stringify(fields));
    console.log('---------11-----------',fields.Quantity__c);
    console.log('----------222--------',fields.Quantity_Filled__c);
    console.log('sum -----------------',Number(fields.Quantity__c) - Number(fields.Quantity_Filled__c));
    fields.Quantity__c = Number(fields.Quantity__c) - Number(fields.Quantity_Filled__c);
    fields.Id = recordId;
    console.log('--------fields----2----', JSON.stringify(fields));
    console.log('pre submit----', JSON.stringify(this.template.querySelector("lightning-record-edit-form[data-id='" + recordId + "']")));
    this.template.querySelector("lightning-record-edit-form[data-id='" + recordId + "']").submit(fields);
    console.log('----------------');
}

output

--------fields----1---- {"Status__c":"Coordinating","Quantity_Filled__c":"14.00","Quantity__c":67}
---------11----------- 67
----------222-------- 14.00
sum ----------------- 53
--------fields----2---- {"Status__c":"Coordinating","Quantity_Filled__c":"14.00","Quantity__c":53,"Id":"a2Y3S00000GNmu7UAD"}
pre submit---- {}

html

    <template for:each={taskResourceList} for:item="mr">
        <div key={mr.Id} class="">
            <lightning-record-edit-form 
                data-id={mr.Id} 
                object-api-name="Resource__c" 
                onsuccess={handleSuccess} 
                onerror={handleError} 
                onsubmit={handleSubmit}>

                <div class="slds-grid slds-wrap slds-grid_vertical-stretch slds-border_bottom slds-size_12-of-12">
                    <div class="slds-size_2-of-12 slds-border_right">
                        <div class=" slds-m-right_medium slds-m-top_xxx-small slds-m-bottom_xxx-small">
                            <lightning-input-field 
                                variant="label-hidden" 
                                onchange={handleChange} 
                                data-id={mr.Id} 
                                field-name="Status__c" 
                                value={mr.Status__c}>
                            </lightning-input-field>
                        </div>
                    </div>
                    <div class="slds-size_2-of-12 slds-border_right">
                        <div class="slds-m-left_x-small slds-m-top_x-small">
                            <lightning-output-field 
                                variant="label-hidden" 
                                field-name="Resource_Name__c">
                            </lightning-output-field>
                        </div>
                    </div>
                    <div class="slds-size_2-of-12 slds-border_right">
                        <div class="slds-m-left_xx-small slds-m-right_medium slds-m-top_xxx-small slds-m-bottom_xxx-small">
                            <lightning-input-field 
                                variant="label-hidden"
                                name="Quantity_Filled__c"
                                onchange={handleChange} 
                                data-id={mr.Id} 
                                field-name="Quantity_Filled__c" 
                                value={mr.Quantity_Filled__c}>
                            </lightning-input-field>
                        </div>
                    </div>
                    <div class="slds-size_2-of-12 slds-border_right">
                        <div class="slds-m-left_xx-small slds-m-right_medium slds-m-top_xxx-small slds-m-bottom_xxx-small">
                            <lightning-input-field 
                                disabled
                                variant="label-hidden" 
                                field-name="Quantity__c"
                                value={mr.Quantity__c}>
                            </lightning-input-field>
                        </div>
                    </div>
                    <div class="slds-size_3-of-12">
                        <div class="slds-m-left_x-small slds-m-top_x-small">
                            <lightning-output-field 
                                variant="label-hidden" 
                                field-name="Description__c">
                            </lightning-output-field>
                        </div>
                    </div>
                    <div class="slds-size_1-of-12"><lightning-button class="slds-float_left slds-m-top_xxx-small slds-m-bottom_xxx-small slds-hide" data-id={mr.Id} variant="brand" type="submit" label="Save"></lightning-button></div>
                </div>
            </lightning-record-edit-form>

Answer 1

I somehow deleted record-id parameter from the form. Add it back and it works.

<lightning-record-edit-form
                record-id={mr.Id}  <<------------
                data-id={mr.Id} 
                object-api-name="Resource__c" 
                onsuccess={handleSuccess} 
                onerror={handleError} 
                onsubmit={handleSubmit}>