Inquiry about lightning-record-form

Question

I am trying to find a definitive answer to an issue I'm trying to work through. I have a lightning-record-form in a component that I am trying to access the field values for, without having to rely on any of the standard events or buttons of the form, so no onsubmit, onsuccess, etc., but rather just pull the fields and their values from the click of a button independent of the form itself, because there are some situations in which I need to check the values against some complex logic before allowing the standard processes, and I need it where I can run through them outside that framework, but since I can't just do a basic event.preventDefault() then pull the fields from the event, I need this option if available.

I've tried all the combinations of this.template.querySelector() i could think of in trying to access the fields, but I'm having no luck, so I'm wondering if it's even possible? If so, what is the correct syntax? If it wasn't necessary to use the dynamism of the form to adjust on the fly to the different fields available to different record types, I'd just build out a custom form, but in the long run if I can get this to work and just access the lightning-record-form fields it'll simplify things considerably

In case it matters, this is the form itself:

<lightning-record-form
                                object-api-name="Contact"
                                record-type-id={recordTypeId}
                                mode="edit"
                                onsuccess={handleSuccess}
                                onsubmit={onFormSave}
                                oncancel={onCancel}
                                layout-type="Full"
                                columns="1"
                                >

I also have a secondary issue that's not as important, but still another minor headache. How do I get the form to respect the org's custom theme colors? I would have thought since we have an active custom theme set, the button colors and the like would automatically adjust to reflect the color choices, but they instead are displaying the default blue and white button types.

Any insight into either would be appreciated, thanks.

Answer 1

I've tried all the combinations of this.template.querySelector() i could think of in trying to access the fields, but I'm having no luck, so I'm wondering if it's even possible? If so, what is the correct syntax?

You cannot use template query selector to reach into another component's HTML, but only to query within the component itself. Every lightning web component is encapsulated within something called as Shadow DOM which basically places a boundary protecting any manipulation of its internal structure by external components. You can read about it here & here. By using template query selector, you are trying to reach into the internal DOM structure of the lightning-record-form (which is not allowed in LWC).

To get the record data, you can use getRecord of lightning\uiRecordApi (although this might cause additional wire service execution). Refer here for more details.

How do I get the form to respect the org's custom theme colors?

AFAIK, lightning-record-form obeys the default SLDS and you cannot reach into this base component DOM to style its internal HTML (because of Shadow DOM restrictions), but you can apply CSS at the outer level of the component. If you want better control to style the record view, you would need to resort to lightning-record-view-form. To understand how CSS works with the Shadow DOM restrictions, check this out.