0

I have a lightning-record-edit-form in a for loop that contains some input values. I'm retrieving their default values from Apex. One of the values I get from Apex is a lookup, and I don't want it to be displayed in the UI.

Therefore, I have hidden that value in the lightning-record-edit-form. However, when I use the template querySelectorAll in my JavaScript, I'm not able to retrieve that value.

HTML:

<template for:each={prodCompensationList} for:item="item" for:index="index">
            <lightning-record-edit-form key={item.Id} object-api-name="Compensation_Product__c" class="slds-m-bottom_medium my-form">
                <lightning-messages> </lightning-messages>
                
                    <lightning-layout-item size="12" padding="around-small">
                        <lightning-input-field field-name="Product__c" variant="label-stacked" value={item.Product__c} required>
                        </lightning-input-field>
                    </lightning-layout-item>
                    <lightning-layout-item size="12" padding="around-small">
                        <lightning-input-field field-name="Quantity__c" variant="label-stacked" value={item.Quantity__c} required>
                        </lightning-input-field>
                    </lightning-layout-item>
                    <lightning-layout-item size="12" padding="around-small">
                        <lightning-input-field field-name="Double_Commission__c" variant="label-stacked" value={item.Double_Commission__c} >
                        </lightning-input-field>
                    </lightning-layout-item>

<!-- This is hidden field **Product_Commission_Rate__c** -->
                    <lightning-layout-item size="12" padding="around-small">
                        <lightning-input-field field-name="Product_Commission_Rate__c" variant="label-stacked" value={item.Product_Commission_Rate__c} >
                        </lightning-input-field>
                    </lightning-layout-item>
            </lightning-record-edit-form>
        </template>

JS:

const forms = Array.from(this.template.querySelectorAll('lightning-record-edit-form'));
              console.log('>>> forms... '+JSON.stringify(forms));
            const records = forms.map((form) => {
            const fields = Array.from(form.querySelectorAll('lightning-input-field'));
            const fieldData = fields.map((field) => [field.fieldName, field.value]);
                return Object.fromEntries([['sobjectType', 'Compensation_Product__c'], ...fieldData]);
            });
2
  • 1
    If you use slds-hide then the field will still be in the DOM and querySelectorAll('lightning-input-field') should match it. In your code I don't see anything that hides the field?
    – Keith C
    Commented Dec 10, 2023 at 18:31
  • @KeithC thanks it worked, earlier I was using slds-hidden instead of slds-hide Commented Dec 11, 2023 at 12:32

1 Answer 1

0

The reason why you are not able to retrieve the hidden value from the lightning-record-edit-form using the template querySelectorAll is that the hidden attribute or CSS style prevents the element from being rendered in the DOM. Therefore, the querySelectorAll method cannot find the element and returns an empty list.

To solve this issue, you can use one of the following methods:

  • Use the data-* attribute instead of the hidden attribute or CSS style to hide the element. The data-* attribute allows you to store custom data on an element without affecting its rendering.

    • For example, you can use something like this in your HTML template: <lightning-input-field field-name="LookupField__c" data-hidden="true"></lightning-input-field>
    • And then use something like this in your JavaScript file:let hiddenValue = this.template.querySelectorAll('[data-hidden="true"]');
  • Use the aria-hidden attribute instead of the hidden attribute or CSS style to hide the element. The aria-hidden attribute indicates that the element is not visible or interactive, but it still exists in the DOM.

    • For example, you can use something like this in your HTML template:<lightning-input-field field-name="LookupField__c" aria-hidden="true"></lightning-input-field>
    • And then use something like this in your JavaScript file:let hiddenValue = this.template.querySelectorAll('[aria-hidden="true"]');

You must log in to answer this question.

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