<noerrorobjectavailable>闪电 web 组件 (LWC) 中的脚本错误</noerrorobjectavailable>

Question

I am trying to create a customer review form but having issues when the user is about to submit it.

Whenever I try to test by clicking the submit button, I keep getting the error below,

Where could I have gone wrong?

My code can be found below (HTML, then Javascript)

<template>
    <lightning-record-edit-form object-api-name="Customer_Review__c" onsubmit={handleSubmit} record-id={recordId}>
        <lightning-messages></lightning-messages>
        <lightning-input-field field-name="Hotel_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Price_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Staff_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Room_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Event_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Equipment_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Environment_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Manager_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Cocktail_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Drink_Rating__c"></lightning-input-field>
        <lightning-button type="submit" label="Submit Review"></lightning-button>
    </lightning-record-edit-form>
</template>

import { LightningElement, api } from 'lwc';

export default class Marriott extends LightningElement {
    @api
    handleSubmit(event) {
        // Prevent the form from being submitted
        event.preventDefault();

        // Get the form element
        const form = event.target;

        // Get the values of the form fields
        const values = {};
        for (let field of form.elements) {
            if (field.name) {
                values[field.name] = field.value;
            }
        }

        // Output the form values to the console
        console.log(values);

        // Clear the form fields
        form.reset();
    }
}

Answer 1

Try putting the code of handleSubmit in a try catch block and console.log the error. This is helpful in debugging the NoErrorObjectAvailable error. Is handle submit being used outside the Mari.nette class. It is defined as an api method

Try replacing

const form = event.target;

with

const fields = event.detail.fields

and loop over fields instead of form.elements

Since this is supported by lightning-record-edit-form's submit event and you want to loop over the fields