LWC How to display address values in lightning-input-field?

Question

I have changedFields object with the structure like following:

changed fields: {"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"}}

I would like to display BillingAddress values in lightning-input-field but instead it's empty: FORM

I tried adding {changedFields.BillingAddress} as value of lightning-input-field and I was expecting it will be shown in the form:

<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>

I have the same functionality with Name which has similar structure to Address and it works fine. How can I achieve this with Address? I'd rather avoid using separate fields or lightning-input-address because it would need rebuild of few components.

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);
}

}

Answer 1

You're probably setting changedFields something like this right?

this.changedFields.BillingAddress = newValue;

This won't work b/c the reference hasn't changed. You will have to do something like this to get the ui to react:

this.changedFields = { ...this.changedFields, BillingAddress: newValue };