1

I have a lwc child component that is responsible for loading the lightning-record-edit-form for various sObjects. I use a JavaScript object that is passed in to assign the record id (for edits) and the fields that I want to display for that sObject. The template loops through the array in the JavaScript object to build out the form. All this works, but I'm unable to disable or enable the "Other" text fields based on the values of the picklist on initial display of the form. I don't seem to have access to the DOM in renderedCallback() because I can console.log this.template.querySelector('[data-id="Material_Other__c"]') which prints out null and likewise in the wired service. But works if called via an event handler, also tried connectedCallback() which of course fires before renderedCallback.

After the form is loaded my code works if manipulated through the UI. If the user selects 'Other' from the picklist it will enable the 'Other' text box or if they select a value not equal to 'Other' it disables the 'Other' text box. Is there a way to get the value of the picklist either from the DOM or from the wired service and set the 'Other' text fields to enabled or disabled on initial display of the form? There could be multiple 'Other' text fields that need to be enabled or disabled independently of each other.

<lightning-record-edit-form object-api-name={objectApiName} record-id={buildObject.recordId} onsuccess={handleSuccess}>
 ...
 <template for:each={buildObject.fields} for:item="element">
...
  <template if:false={element.output}>
    <lightning-input-field key={element.index} field-name={element.apiName} value={element.value} onchange={handleInputChange} data-id={element.dataId}></lightning-input-field>
  </template>
...
 </template>
...
</template>
1

Use the onload event from lightning-record-edit-form to query all the inputs/outputs with their respective field Name and values.

HTML

<lightning-record-edit-form onload={handleOnLoad} object-api-name={objectApiName} record-id={buildObject.recordId} onsuccess={handleSuccess}>
...
</lightning-record-edit-form>

JS

handleOnLoad(event) {
    console.log(JSON.stringify(event.detail)); // you get all data related to objects and records
    this.template
        .querySelectorAll("lightning-input-field")
        .forEach((input) => {
            console.log("name", input.name);
            console.log("field name", input.fieldName);
            console.log("value", input.value);
        });
}

This is the console output:

enter image description here

In the handleOnLoad funtion you get all the inputs with their name, fieldName and value, based on that you can control the visibility of the fields.

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.