2

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>
Improve this question

1 Answer 1

Reset to default
3

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.

Improve this answer
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
    Commented 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
    Commented 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
    Commented 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
    Commented 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
    Commented Jun 14, 2019 at 13:32

You must log in to answer this question.

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