[SalesForce] Address Field on LWC Lightning-record-edit-form

I am having difficulty updating the standard lead address field on a LWC in a Lightning-record-edit-form. I am able to update the other fields in the form though.

Here is the HTML:

<lightning-record-edit-form record-id={recordId} object-api-name="Lead">

    <lightning-messages></lightning-messages>

    <div class="slds-grid slds-gutters">

        <div class="slds-col slds-size_1-of-2">

            <lightning-input-field data-field="Company" field-name="Company">
            </lightning-input-field>

            <lightning-input-field data-field="Phone" field-name="Phone">
            </lightning-input-field>

            <lightning-input-field data-field="Alternate_Phone__c" field-name="Alternate_Phone__c">
            </lightning-input-field>

            <lightning-input-field data-field="Federal_Tax_Id__c" field-name="Federal_Tax_Id__c">
            </lightning-input-field>

            <lightning-input-field data-field="Legal_Status__c" field-name="Legal_Status__c">
            </lightning-input-field>

            <lightning-input-field data-field="Website" field-name="Website">
            </lightning-input-field>

        </div>

        <div class="slds-col slds-size_1-of-2">

            <lightning-input-field data-field="DBA__c" field-name="DBA__c">
            </lightning-input-field>

            <lightning-input-field data-field="AnnualRevenue" field-name="AnnualRevenue">
            </lightning-input-field>

            <lightning-input-field data-field="Date_Established__c" field-name="Date_Established__c">
            </lightning-input-field>

            <lightning-input-field data-field="State_of_Incorporation__c" field-name="State_of_Incorporation__c">
            </lightning-input-field>

            <lightning-input-field data-field="Time_Zone__c" field-name="Time_Zone__c">
            </lightning-input-field>

            <lightning-input-field data-field="Sic__c" field-name="Sic__c">
            </lightning-input-field>


        </div>
    
    </div>

    <hr>

    <div>

        <lightning-input-field data-field="Address" field-name="Address"></lightning-input-field>

    </div>

</lightning-record-edit-form>

JS:

saveForm(){

    const allValid = [...this.template.querySelectorAll('lightning-input')]
        .reduce((validSoFar, inputFields) => {
            inputFields.reportValidity();
            return validSoFar && inputFields.checkValidity();
    }, true);

    console.log('Updating Leads "Account Information"');

    const fields = {};
    fields[LEAD_ID_FIELD.fieldApiName] = this.recordId;
    fields[COMPANY_FIELD.fieldApiName] = this.template.querySelector("[data-field='Company']").value;
    fields[DBA_FIELD.fieldApiName] = this.template.querySelector("[data-field='DBA__c']").value;
    fields[LEGAL_STATUS_FIELD.fieldApiName] = this.template.querySelector("[data-field='Legal_Status__c']").value;
    fields[DATE_ESTABLISHED_FIELD.fieldApiName] = this.template.querySelector("[data-field='Date_Established__c']").value;
    fields[WEBSITE_FIELD.fieldApiName] = this.template.querySelector("[data-field='Website']").value;
    fields[PHONE_FIELD.fieldApiName] = this.template.querySelector("[data-field='Phone']").value;
    fields[FED_TAX_ID_FIELD.fieldApiName] = this.template.querySelector("[data-field='Federal_Tax_Id__c']").value;
    fields[STATE_OF_INCORP_FIELD.fieldApiName] = this.template.querySelector("[data-field='State_of_Incorporation__c']").value;
    fields[ANNUAL_REV_FIELD.fieldApiName] = this.template.querySelector("[data-field='AnnualRevenue']").value;
    fields[TIME_ZONE_FIELD.fieldApiName] = this.template.querySelector("[data-field='Time_Zone__c']").value;
    fields[ALTERNATE_PHONE_FIELD.fieldApiName] = this.template.querySelector("[data-field='Alternate_Phone__c']").value;
    fields[ADDRESS_FIELD.fieldApiName] = this.template.querySelector("[data-field='Address']").value;
    fields[SIC_FIELD.fieldApiName] = this.template.querySelector("[data-field='Sic__c']").value;

    const recordInput = {
        fields
    };

    console.log('Record Input: ', recordInput);

    if (allValid) {

        console.log('Update Valid');

        updateRecord(recordInput)
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Lead updated',
                        variant: 'success'
                    })
                );
                console.log('Update Successful');
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error Updating record',
                        message: error.body.message,
                        variant: 'error'
                    })
                );
            });

        this.closeAccountModal();
    } 
    else {
        // The form is not valid
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Something is wrong',
                message: 'Check your input and try again.',
                variant: 'error'
            })
        );
    }
}

I am also importing all of the fields:

import { LightningElement, wire, api, track } from 'lwc';
import { getRecord, getFieldValue, updateRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
import LEAD_ID_FIELD from '@salesforce/schema/Lead.Id';
import COMPANY_FIELD from '@salesforce/schema/Lead.Company';
import DBA_FIELD from '@salesforce/schema/Lead.DBA__c';
import LEGAL_STATUS_FIELD from '@salesforce/schema/Lead.Legal_Status__c';
import DATE_ESTABLISHED_FIELD from '@salesforce/schema/Lead.Date_Established__c';
import WEBSITE_FIELD from '@salesforce/schema/Lead.Website';
import PHONE_FIELD from '@salesforce/schema/Lead.Phone';
import FED_TAX_ID_FIELD from '@salesforce/schema/Lead.Federal_Tax_ID__c';
import STATE_OF_INCORP_FIELD from '@salesforce/schema/Lead.State_of_Incorporation__c';
import ANNUAL_REV_FIELD from '@salesforce/schema/Lead.AnnualRevenue';
import TIME_ZONE_FIELD from '@salesforce/schema/Lead.Time_Zone__c';
import ALTERNATE_PHONE_FIELD from '@salesforce/schema/Lead.Alternate_Phone__c';
import STREET_FIELD from '@salesforce/schema/Lead.Street';
import CITY_FIELD from '@salesforce/schema/Lead.City';
import POSTALCODE_FIELD from '@salesforce/schema/Lead.PostalCode';
import STATE_FIELD from '@salesforce/schema/Lead.State';
import SIC_FIELD from '@salesforce/schema/Lead.Sic__c';
import ADDRESS_FIELD from '@salesforce/schema/Lead.Address';

When I log the fields values everything is getting captured correctly except the Address field:
enter image description here

I am following this documentation: enter link description here. Like I said, all the other fields work but the standard address field. Has anyone experienced this issue before? Any assistance would be greatly appreciated.

RESOLUTION:

                                <div class="slds-grid slds-gutters">

                                    <div class="slds-col">

                                        <lightning-input-field data-field="Street" field-name="Street"></lightning-input-field>

                                        <lightning-input-field data-field="City" field-name="City"></lightning-input-field>

                                    </div>

                                </div>

                                <div class="slds-grid slds-gutters">

                                    <div class="slds-col">

                                        <lightning-input-field data-field="PostalCode" field-name="PostalCode"></lightning-input-field>

                                    </div>

                                    <div class="slds-col">

                                        <lightning-input-field data-field="State" field-name="StateCode"></lightning-input-field>

                                    </div>

                                </div>

Best Answer

Standard Address field on Lead object is compound type of field which is a combination of Street, City, State, Country and PostalCode thats why in your console log you are seeing address as a JSON object rather than string value. You might want to try separate lightning input tags for each of the field included in Address compound field then I think it will work.

Related Topic