Show related fields in Record View Form

Question

I have a custom_object__c which has a lookup to Contact (Contact__c), I'm trying to pull the phone number on the contact and display it on my custom_object__c flexipage:

import { LightningElement, api } from 'lwc';

import NAME_FIELD from '@salesforce/schema/Custom_Object__c.Contact__r.Phone';
export default class MyComponent extends LightningElement {
    // Expose a field to make it available in the template
    nameField = NAME_FIELD;

    // Flexipage provides recordId and objectApiName
    @api recordId;
    @api objectApiName;
}


<template>
    content goes here:
    <lightning-record-view-form object-api-name={objectApiName} record-id={recordId}>
        <lightning-output-field field-name={nameField}> </lightning-output-field>
    </lightning-record-view-form>
</template>

I'm getting the following error:

outputField.js:1 Error: Field [Contact__r.Phone] was not found
    at Object.N [as getUiField] (fieldUtils.js:1:2729)
    at J.updateFieldInfo (outputField.js:1:6886)
    at J.wireRecordUi (outputField.js:1:7376)
    at dr (aura_prod.js:13:34198)
    at s.<anonymous> (aura_prod.js:13:18101)
    at eval (recordViewForm.js:1:3841)
    at Array.forEach (<anonymous>)
    at pn.value [as forEach] (aura_prod.js:1:9281)
    at g.wireViewData (recordViewForm.js:1:3827)
    at g.handleData (recordViewForm.js:1:3154)

Is this a limitation of salesforce/schema/? I can't import related fields?

Answer 1

What are you trying to do will not work because Record View Form requires you to specify the information of the same object.

For example, if you include lightning-record-view-form on a record page for an account, set object-api-name="Account". If the record ID and object API name don't agree, the form doesn't display.

So in your case, the field and object-api-name will not match and it'll give you an error like the field doesn't exist, even after getting the schema of the field.

To get the field value from a parent record you can utilize two methods from Lightning data service - getRecord & getFieldValue.

You can refer below example -

import { LightningElement, api , wire} from 'lwc';
import CONPHONEFIELD from '@salesforce/schema/Custom_Object__c.Contact__r.Phone';

import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

const fields=[CONPHONEFIELD];

export default class ParentRecordValue extends LightningElement {
    
    conPhone = CONPHONEFIELD;
    @api recordId;
    

    @wire(getRecord, { recordId: '$recordId', fields })
    record({ error, data }) {
        if (data) {
            console.log('contact phone ' + getFieldValue(data, this.conPhone));
        }
    }
}