0

I am working on building a LWC that componentizes lightning-record-edit-form, but the form cannot evaluate the lightning-input-field when the fields are nested within another component.

The basic model for this would be described below:

When I've tried this the fields do not render. This is probably due to the shadow tree. Does anyone know a way to make an example like this work?

<c-parent>
<lightning-record-edit-form>
    <lightning-button label="save" type="submit" </lightning-button>

    <!--These child components would house the fields which are built dynamically-->
    <c-child></c-child>
    <c-child></c-child>
</lightning-record-edit-form>
</c-parent>

<c-child>
<div class="slds-grid slds-wrap">            
    <template for:each={fields} for:item="field">
        <div key={field.Id}>
            <lightning-output-field field-name={field.APIName}> . 
            </lightning-output-field>
        </div>
    </template>
</div>
</c-child>
1

That's just not possible; as you've (correctly) guessed, the Shadow DOM prevents these components from speaking to each other. The lightning-input-field and lightning-output-field must be children of lightning-record-edit-form in the same parent template.

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.