LWC：如何在lightning-input-field中显示地址值？

我有一个结构如下的changedFields对象：

{"Name":"Test Practice Test","ReasonForUpdate":"Test","BillingAddress":{"BillingCity":"Beaumont","BillingCountry":"United States","BillingCountryCode":"US","BillingGeocodeAccuracy":null,"BillingLatitude":null,"BillingLongitude":null,"BillingPostalCode":"77705","BillingState":"TX","BillingStateCode":"TX","BillingStreet":"Test Street change 123"}}

尝试在lightning-input-field中显示BillingAddress的值，但该字段始终为空。Name字段用相同的绑定逻辑可以正常显示，我希望避免拆分地址字段或使用lightning-input-address（因为需要重构多个组件）。

相关HTML代码：

<lightning-record-edit-form if:true={isPractice} record-id={recordId} object-api-name={objectApiName}>
    <div class="slds-box slds-theme_default">
        <lightning-input-field field-name="Name" name="Name" value={changedFields.Name} onchange={handleFormInputChange}></lightning-input-field>
        <lightning-input-field field-name="Phone" name="Phone" value={changedFields.Phone} type="phone" onchange={handleFormInputChange}></lightning-input-field>
        <lightning-input-field field-name="Fax" name="Fax" value={changedFields.Fax} onchange={handleFormInputChange}></lightning-input-field>
        <lightning-input-field field-name="ShippingAddress" name="ShippingAddress" value={ShippingAddress} onchange={handleFormInputChange}></lightning-input-field>
        <lightning-input-field field-name="BillingAddress" name="BillingAddress" value={changedFields.BillingAddress} onchange={handleFormInputChange}></lightning-input-field>
    </div>
</lightning-record-edit-form>

相关JS代码：

import { LightningElement, track, api, wire } from 'lwc';
import getAccount from '@salesforce/apex/ChangeRequestController.getAccount';

export default class ChangeRequestEditForm extends LightningElement {
    @api recordId;
    @api objectApiName;
    @api changedFieldsBack;
    @track changedFields = {};

    @track isPractice = false;
    @track isProvider = false;

    @wire(getAccount, { accountId: '$recordId' })
    accountRecordType({ data }) {
        if (data) {
            if (data.RecordType.Name === "Practice") {
                this.isPractice = true;
            } else if (data.RecordType.Name === 'Provider') {
                this.isProvider = true;
            }
        }
    }

    connectedCallback(){
        if (Object.keys(this.changedFieldsBack).length !== 0) {
            Object.assign(this.changedFields, this.changedFieldsBack);
            var billingTest = {};
            billingTest.BillingCity = "city";
            billingTest.BillingCountry = "United States";
            billingTest.BillingCountryCode = "US";
            billingTest.BillingGeocodeAccuracy = null;
            billingTest.BillingLatitude = null;
            billingTest.BillingLongitude = null;
            billingTest.BillingPostalCode = "77705";
            billingTest.BillingState = "TX";
            billingTest.BillingStateCode = "TX";
            billingTest.BillingStreet = "street";
            this.changedFields = { ...this.changedFields, BillingAddress: billingTest };

            console.log('changed fields: ' + JSON.stringify(this.changedFields));
            console.log('billing address: ' + JSON.stringify(this.changedFields.BillingAddress));
        }
    }

    handleFormInputChange(event){
        this.changedFields[event.target.name] = event.target.value;
        const valuechangedEvent = new CustomEvent("progressvaluechange", {
                detail: this.changedFields
            });
            this.dispatchEvent(valuechangedEvent);
    }
}

问题根源是lightning-input-field对复合地址字段的value格式有特定要求：需要使用不带Billing前缀的字段名结构，而非当前带前缀的嵌套对象。

修改步骤 #

1. 调整JS中地址对象的字段名：去掉所有Billing前缀，保留基础字段名。
2. HTML绑定逻辑保持不变：依然使用value={changedFields.BillingAddress}，field-name="BillingAddress"会自动映射到对应的复合字段结构。

修改后的JS核心代码片段 #

connectedCallback(){
    if (Object.keys(this.changedFieldsBack).length !== 0) {
        Object.assign(this.changedFields, this.changedFieldsBack);
        var billingTest = {};
        // 去掉Billing前缀，使用基础字段名
        billingTest.City = "Beaumont";
        billingTest.Country = "United States";
        billingTest.CountryCode = "US";
        billingTest.GeocodeAccuracy = null;
        billingTest.Latitude = null;
        billingTest.Longitude = null;
        billingTest.PostalCode = "77705";
        billingTest.State = "TX";
        billingTest.StateCode = "TX";
        billingTest.Street = "Test Street change 123";
        this.changedFields = { ...this.changedFields, BillingAddress: billingTest };

        console.log('changed fields: ' + JSON.stringify(this.changedFields));
        console.log('billing address: ' + JSON.stringify(this.changedFields.BillingAddress));
    }
}

额外说明 #

• 如果changedFieldsBack中已包含带Billing前缀的地址数据，需要先做一次转换，去掉前缀后再赋值给changedFields.BillingAddress。
• 用户修改地址字段时，event.target.value会自动返回不带前缀的复合对象，现有的handleFormInputChange逻辑无需额外修改即可正常处理。

内容的提问来源于stack exchange，提问作者maleficent314