[SalesForce] How to get lookup field display value within the lightning-input-field event

It is all ok to get the lookup field id. But, how to get the display name of the lookup field in the LWC?

Here is an example:

enter image description here

The LWC template file

<lightning-record-edit-form object-api-name="Custom_Object__c" onsuccess={handleSuccess}>
  <lightning-input-field field-name='Account__c' onchange={handleLookupFieldChange}></lightning-input-field>
</lightning-record-edit-form>

and this is the controller

handleLookupFieldChange(event) {
  alert(event.target.value); // "001***************"
  alert(event.detail.value[0]); // "001***************"
}

But, how to get the account name (sForce) of the lookup input?

I've tried to get the placeholder but it does not work.

alert('placeholder: ' + event.target.placeholder); // placeholder: undefined

Best Answer

As @Cray Kao suggested, it's not possible to retrieve the placeholder of the lookup field. You could wire the lookup record id to a getRecord() and getFieldValue() lightning/uiRecordApi adapter and get the record name.

Template:

<lightning-record-edit-form object-api-name="Custom_Object__c" onsuccess={handleSuccess}>
  <lightning-input-field field-name='Account__c' onchange={handleLookupFieldChange}></lightning-input-field>
</lightning-record-edit-form>

JS:

import {
    LightningElement,
    api,
    wire
} from 'lwc';
import {
    getRecord,
    getFieldValue
} from 'lightning/uiRecordApi';

import NAME_FIELD from '@salesforce/schema/Account.Name';

const fields = [NAME_FIELD];
export default class LwcClass extends LightningElement {
    lookupId;

    @wire(getRecord, {
        recordId: '$lookupId',
        fields
    })
    account;
    get accountName() {
        return getFieldValue(this.account.data, NAME_FIELD);
    }
    handleLookupFieldChange(event) {
        this.lookupId = event.target.value;
        alert(event.target.value); // "001***************"
        alert(event.detail.value[0]); // "001***************"
    }
}