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

}

willard · Accepted Answer · 2024-01-04 20:43:28Z

0

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

answered Jan 4, 2024 at 20:43

willard

2513 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

maleficent314 Over a year ago

I don't think that's it. This is how the code looks like now - please take a look at the last picture.

willard Over a year ago

Your code is in connectedCallback - when does the changedFields variable get set? It would be good if you could just post text instead of screenshots for your html and js to better assist you.

maleficent314 Over a year ago

Thanks! I'm new here. I modified post, so now you can see code. handleFormInputChange function handle changes of the form. After clicking "Next" button, other component shows up. Then user can click "Back" button and values from changedFields should appear on UI, not the original record values. Let me know if that makes sense! As I mentioned it works with any other field except for addresses.

maleficent314 Over a year ago

I added "billingTest" variable just to test displaying.

willard Over a year ago

ah - you know what, it probably has something to do with BillingAddress being a compound field. I'm not sure what you're doing will work. If anything, I would try billingTest.City instead of billingTest.BillingCity. Maybe that will work? Otherwise, you may need to split out the input into separate fields.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related