Disable multiple fields based on picklist values inside a lightning-record-edit-form in LWC when the form is displayed for the first time

Question

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>

Answer 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:

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.