1

I have a lwc with a record-edit-form in the html file and createRecord() in the js. When I put the component on a record page by itself, everything works fine. But when I place it as a child within a parent component, it gives an error saying the object is undefined. Can anyone explain why this is happening and how to fix it?

Child HTML:

...
         <template>
            <div class="slds-m-around_medium">
            <lightning-record-edit-form object-api-name="Responsibilities__c" onsuccess={handleSuccess}>
                <lightning-input-field field-name="Area_of_Responsibility__c" value={recordId} disabled></lightning-input-field>
                <lightning-input-field field-name="Name"></lightning-input-field>
                <lightning-input-field field-name="Description_Long__c"></lightning-input-field>
                <lightning-input-field field-name="Link_to_Documentation__c"></lightning-input-field>
                <lightning-button class="slds-m-top_small"
                                  type="reset"
                                  label="Cancel"
                                  onclick={handleCancel}>
                </lightning-button>
                <lightning-button class="slds-m-top_small"
                                  type="submit"
                                  label="Submit"
                                  onclick={handleSubmit}>
                </lightning-button>
            </lightning-record-edit-form>
            </div>
        </template>
...

Child JS:

...
    handleSubmit(event) {     
        event.preventDefault();
        const fields = event.detail.fields;
        createRecord({Responsibilities__c, fields})
            .then(() => {return refreshApex(this.wiredResponsibilitiesResult);   
            }).catch(error => {
                console.log(error);
            });
        this.showForm = false;
    }
...

When viewing the parent component, you can interact with the form in the child component. Everything works fine until I hit Submit, then I get a popup that says:

A Component Error has occurred!
Message: Responsibilities__c is not defined
Component Descriptor: c:jobDescriptionContainer

Parent HTML:

...
            <template for:each={aorsForDept} for:item="item">
                <div key={item.Id}>
                <div class="slds-text-heading_small"> {item.Name} </div> 
                    <c-responsibilities-collapsible
                        record-id={item.Id}>
                    </c-responsibilities-collapsible>
                </div> 
            </template>
...

Parent JS:

import { LightningElement, api, track, wire } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
...
export default class JobDescriptionContainer extends LightningElement {
    @track aorsForDept = [];
}...    
//I think that's all that's relevant
2
  • In this line in the child JS - createRecord({Responsibilities__c, fields}) - should you have quotes around "Responsibilities__c"? Apr 1, 2020 at 17:57
  • I don't think so... the code gave me a syntax error when I tried right now to change that.
    – nfoley
    Apr 1, 2020 at 18:04

2 Answers 2

1

The call to createRecord has the wrong parameters. Update your code to first import your schema object:

import RESPONSIBILITIES from '@salesforce/schema/Responsibilities__c';

Then make the call:

createRecord({apiName: RESPONSIBILITIES.objectApiName, fields})
1
  • Thanks @PhilW. Idk why this didn't do the trick exactly, but it did help me figure it out. I got it to work when I used ({apiName: "Responsibilities__c", fields})
    – nfoley
    Apr 1, 2020 at 22:57
1

Fixed it when I changed the call to:

createRecord({apiName: "Responsibilities__c", fields})

I also changed the HTML for the form and moved the action {handleSubmit} from the Submit button to the record-edit-form properties. It now reads:

<lightning-record-edit-form object-api-name="Responsibilities__c" onsuccess={handleSuccess}
                            onsubmit={handleSubmit}>  <!--MOVED IT HERE-->
                ...
   <lightning-button class="slds-m-top_small"
                     type="submit"
                     label="Submit">                                
                    <!--PREVIOUSLY HAD IT HERE-->
   </lightning-button>
</lightning-record-edit-form>

Thanks to Phil and Brian, who both pointed me in the right direction

1
  • Ah, I didn't spot you not using onsubmit...
    – Phil W
    Apr 2, 2020 at 7:33

You must log in to answer this question.

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