I am building a component using a
lightning-record-edit-form, which may either display an existing record for edit, or a new record for create. The component will set the
record-id appropriately. One of the fields I need to display is a Lookup field, and it should not be user-editable. When the edit form is displaying an existing record, this field is guaranteed to be pre-populated, so a
lightning-output-field would work. When displaying a new record for create, the containing LWC will know the correct record id for the lookup (and should set it prior to save); I need to pre-populate the value and display the field, but I can't figure out how to pass the value so that the
lightning-output-field can display it.
The only way I know to pre-populate a value in a
lightning-record-edit-form is to use the
value attribute of a
lightning-input-field component. However, if I do that, the user can change the value, which should not be allowed. I would normally use the
read-only attribute, but per the
lightning-input-field docs (and confirmed empirically), that does not work for lookup fields - it remains editable.
I tried adding both a hidden
value attribute to allow me to set the value, and a
lightning-output-field to show the value, but that doesn't work - the output field remains blank.
I am aware that I could intercept the submit event and set the lookup id in the fields object before calling
this.template.querySelector('lightning-record-edit-form').submit(fields), but displaying the lookup on the form is a requirement.
I considered just displaying the value myself, but assuming that I only have the record Id, I would need to separately query for the related field's display value, and attempt to format to match the rest of the form. I'm saving this as a last resort; I'm hoping there's some way to tell the
record-edit-form to populate the lookup field with my id value, and allow an OOB component to display the corresponding record name for that value.