1

I have a lightning-record-edit-form with multiple lightning-input-field.

I'd like to put some of the input-field into a child component, say childComponent. The code is attached at the end.

However, the issue is that the lightning-input-field in childComponent does not render correctly. I assume the connection between lightning-record-edit-form and the API name in field-name are broken.

How to fix it?

The code for parent component: field3__c and field4__c do not show correctly.

<template>
  <lightning-record-edit-form  object-api-name={objectApiName} record-id={recordId}>
    <lightning-input-field field-name="field1__c"></lightning-input-field>
    <lightning-input-field field-name="field2__c"></lightning-input-field>
    <c-child-component></c-child-component>
  </lightning-record-edit-form
</template>

The code for child component:

<template>
    <lightning-input-field field-name="field3__c"></lightning-input-field>
    <lightning-input-field field-name="field4__c"></lightning-input-field>
</template>

1 Answer 1

2

You cannot use lightning-input-field as standalone component. The component always works within the context of a lightning-record-edit-form. Without the details of the object-api-name defined in the lightning-record-edit-form, there will be no way to link the field-name on lighnting-input-field back to that SObject.

This is from the documentation:

To create a record edit layout, use this component with lightning-record-edit-form and pass in a record ID and object API name.

To create a record create layout, use this component with lightning-record-edit-form and pass in the object API name of the record you're creating.

7
  • I understand lightning=-input-field doesn't work alone. In my special case, it always sits inside of the lightning-record-edit-form. My custom object has over 100 custom fields. Putting all fields into one gigantic page in one LWC makes me worry how clean(messy) the html page looks like.
    – Xi Xiao
    Jun 13, 2019 at 13:27
  • It actually doesn't sit inside the lightning-record-edit-form. Because every component added sits within its own shadow tree and in this case the boundary is the child component.
    – Jayant Das
    Jun 13, 2019 at 13:31
  • I see, that might be a hard wall. In my case, there are 100+ custom fields in this record-edit-form, I wish to break them down into multiple child pages/modules so it is not a HTML with 1000+ line of markups. Is there an alternative to achieve it?
    – Xi Xiao
    Jun 14, 2019 at 6:17
  • You may like to use lightning-record-form here instead. That will also take care of FLS and sharing.
    – Jayant Das
    Jun 14, 2019 at 12:16
  • Thanks for recommending. Unfortunately, lightning-record-form doesn't fit my situation, there are custom look&feel and error-handling only lightning-edit-form supports.
    – Xi Xiao
    Jun 14, 2019 at 13:32

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.