0

I have an object Foo__c that has MD relationship to Zoo__c object. I am trying to create Foo__c record using lightning-record-edit-form. This is for learning purpose. Below is my code:

HTML:

<template>
    <lightning-record-edit-form object-api-name="Foo__c" record-id={recordId} onsubmit={handleSubmit}
        onsuccess={handleSuccess}>
        <lightning-messages></lightning-messages>
        <lightning-input-field field-name="zoo__c" class="slds-form-element__label" variant="label-hidden">
        </lightning-input-field>
        <lightning-input-field label="Name" field-name="Name" class="slds-form-element__label">
        </lightning-input-field>
        <div class="slds-align_absolute-center" style="margin-top: 5px">
            <lightning-button type="submit" variant="brand" label="Submit" icon-name="utility:save"></lightning-button>
        </div>
    </lightning-record-edit-form>
</template>

JS:

import { LightningElement, api } from 'lwc';

export default class Recordeditform extends LightningElement {
    zooId;
    /** Pls ignore getter and setter here as it does not have any significance **/
    @api
    get recordId() {
        return this.zooId;
    }
    set recordId(value) {
        this.setAttribute('zooId', value);
        this.zooId = value;
    }

    handleSubmit(event) {
        event.preventDefault();
        const inputFields = this.template.querySelectorAll(
            'lightning-input-field'
        );

        if (inputFields) {
            inputFields.forEach(field => {
                console.log('Field is==> ' + field.fieldName);
                console.log('Field is==> ' + field.value);
            });
        }
        this.template.querySelector('lightning-record-edit-form').submit(inputFields);
    }

}

Console output:

enter image description here

I get this error, even though console show zoo__c field is populated.

enter image description here

What am I doing wrong here?

0

Change the this.template.querySelector('lightning-record-edit-form').submit(inputFields); in handleSubmit() to just this.template.querySelector("lightning-record-edit-form").submit(); and it would work. Also, you have onsuccess event handler in the form but no handler function in the js - may be missed in copy paste.

| improve this answer | |
0

Use event to capture fields.

handleSubmit(event) {
    event.preventDefault();
    const inputFields = event.detail.fields;

    if (inputFields) {
        inputFields.forEach(field => {
            console.log('Field is==> ' + field.fieldName);
            console.log('Field is==> ' + field.value);
        });
    }
    this.template.querySelector('lightning-record-edit-form').submit(inputFields);
}

}

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.