Get labels and values of each field in lightning-record-view-form in LWC

Question

I want to get field-name(label) and field-value of each field for validation as shown below. Is there any way to do it in LWC?

sampleRecordViewForm.html

<template>
     <lightning-record-view-form record-id="XXXXXXXXXXXXXXX"
            object-api-name="My_Contact__c">
        <div class="slds-box">
            <lightning-output-field field-name="Name"></lightning-output-field>
            <lightning-output-field field-name="Email__c"></lightning-output-field>
        </div>
         <lightning-button onclick={handleDetailsClick} label="Get Field Details"></lightning-button>
    </lightning-record-view-form>
</template>

sampleRecordViewForm.js

import { LightningElement} from 'lwc';
export default class SampleRecordViewForm extends LightningElement {

    handleDetailsClick() {
        const outputFields = this.template.querySelectorAll('lightning-output-field');

        if (outputFields) {
            outputFields.forEach(field => {
                // eslint-disable-next-line no-console
                console.log('field', field);
            });
        }
    }
}

I want to do processing on these fields so I want field label and field values.

Answer 1

You should use onload event to fetch the record details. Also you cannot get the label and field API name directly - you need to get them separately.

    <lightning-record-view-form record-id={recordId}
                                object-api-name="Account"
                                onload={handleLoad}>
        <lightning-output-field field-name="Name"></lightning-output-field>
        <lightning-output-field field-name="Type"></lightning-output-field>
    </lightning-record-view-form>
    <lightning-button onclick={handleDetailsClick} label="Get Field Details"></lightning-button>

JS:

recordId = '00128000009j45tAAA';
handleLoad(event) {
    this.accountFieldsInfo = event.detail.objectInfos.Account.fields; // gives label, name and many other properties of fields
    this.accountRecord = event.detail.records[this.recordId].fields; // gives values of fields against field name
}
handleDetailsClick() {
    console.log('accountRecord => ', JSON.stringify(this.accountRecord));
    console.log('accountFieldsInfo => ', JSON.stringify(this.accountFieldsInfo));
}

Answer 2

You can use the same attribute that you set in UI - fieldName and outerText for output value, but yes, probably getting value with load event handler is better

import { LightningElement} from 'lwc';
export default class SampleRecordViewForm extends LightningElement {

    handleDetailsClick() {
        const outputFields = this.template.querySelectorAll('lightning-output-field');

        if (outputFields) {
            outputFields.forEach(field => {
                // eslint-disable-next-line no-console
                console.log('field', JSON.stringify(field.fieldName), field.outerText.split('\n')[1]);
            });
        }
    }
}