0

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, Error Screenshot

The code can be found below,

    <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();
    }
}
Improve this question

1 Answer 1

Reset to default
3

lightning-record-edit-form doesn't have a reset method. You need to reset each field individually:

handleReset(event) {
   const inputFields = this.template.querySelectorAll(
       'lightning-input-field'
   );
   if (inputFields) {
       inputFields.forEach(field => {
           field.reset();
       });
   }
}

This is in the documentation.

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.