Return to Revisions

EDIT

To show/hide the child component based on field value dynamically based on fields. Follow the below steps.

Update JS with below code

Define one attribute named fieldsData like

fieldsData = [];

handleOnLoad(event) {
    const fValue = event.detail.records[this.recordId].fields.Industry.value;
    this.fieldsData = [];
    for (let [key, data] of Object.entries(event.detail.records[this.recordId].fields)) {
        console.log(JSON.stringify(data));
        this.fieldsData.push({fieldApiName: key, ...data});
    }
}

In HTML use the below code to show/hide your child component. This code will show the child component only if there is a value in the field.

<template if:true={fieldsData} for:each={fieldsData} for:item="field">
    <c-child-lwc key={field.fieldApiName} if:true={field.value}>
    </c-child-lwc>
</template>

Use lightning-record-edit-form/lightning-record-view-form so the fields don't render by default, and you have freedom to show/hide the fields.

Before Edit

You dont need to use the lightning-output-field with lightning-record-form, record-form will automatically do it for you. Also you don't need to get the record using getRecord API, this is also auto done by record-form.

JS

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

export default class DesignerFields extends LightningElement {
    @api indFields = 'Industry;NumberOfEmployees';
    @api objectApiName = 'Account';
    @api recordId;
    @api record;
    fieldsFormatted = ['Id'];

    connectedCallback() {
        this.fieldsFormatted = (this.indFields || 'Id').split(';').map(field => field);
        console.log(JSON.stringify(this.fieldsFormatted));
    }

    handleOnLoad(event) {
        const fValue = event.detail.records[this.recordId].fields.Industry.value;
        //Q1: fValue = "Education" the correct value. But "Industry" Field Name is still hard coded. 
        //How do I get the value for the field in {fld} variable?
        //Q2: How do I get fValue to render back in the HTML instead of the lightning-output-field
        //I tried this.dispatchEvent(fValue); and it had an error
    }    
}

HTML

<template>
    <lightning-card title="Design Attribute Demo" icon-name="custom:custom19">
        <template if:true={fieldsFormatted}>
            <lightning-record-form record-id={recordId} object-api-name={objectApiName} mode="view" 
                fields={fieldsFormatted} onload={handleOnLoad}>
            </lightning-record-form>
        </template>
    </lightning-card>
</template>