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

1 Answer 1

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .