AnswerBun.com

Unable to edit StateCode & CountryCode in LWC lightning-record-edit-form

I currently have a set of address fields in a Lightning-record-edit-form. I am able to update all of the fields except for the StateCode & CountryCode Fields. They display as disabled.

Here is the HTML:

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

And this is how it appears:

enter image description here

I would like the user to be able to edit the State via a picklist.

  1. Has anyone experienced this before?
  2. Any Ideas on how to resolve?

Salesforce Asked on December 28, 2020

1 Answers

One Answer

I was able to solve this issue by using the Lightning-Input-Address. Please see the below example:

HTML

                                <lightning-input-address
                                    address-label="Address"
                                    street-label="Street"
                                    city-label="City"
                                    province-label="Province"
                                    postal-code-label="PostalCode"
                                    street={accountStreet}
                                    city={accountCity}
                                    province={accountState}
                                    postal-code={accountPostal}
                                    country="United States"
                                    field-level-help="Company Address"
                                    country-options={countryOptions}
                                    province-options={stateOptions}
                                    onchange={handleChange}
                                    show-address-lookup>
                                </lightning-input-address>

JS


import { LightningElement, wire, api, track } from 'lwc';
import { getRecord, getFieldValue, updateRecord } from 'lightning/uiRecordApi';
import { NavigationMixin } from 'lightning/navigation';

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 COUNTRY_FIELD from '@salesforce/schema/Lead.Country';

// Define Fields to Query
const FIELDS = [
    'Lead.Company',
    'Lead.Phone',
    'Lead.Website',
    'Lead.Street',
    'Lead.City',
    'Lead.State',
    'Lead.PostalCode',
    'Lead.Country',
    'Lead.LeadSource',
    'Lead.Owner.Name',
    'Lead.Time_Zone__c',
    'Lead.Date_Established__c',
    'Lead.AnnualRevenue',
    'Lead.Activation_Date__c',
    'Lead.Alternate_Phone__c',
    'Lead.Sic__c',
    'Lead.DBA__c',
]

export default class CompanyInformation extends NavigationMixin(LightningElement) {

    companyAddress = {
        street: '',
        city: '',
        state: '',
        postal: '',
        country: ''
    }

    @wire(getRecord, {recordId: '$recordId', fields: FIELDS})
    lead;

    get accountStreet(){
        return getFieldValue(this.lead.data, 'Lead.Street');
    }

    get accountCity(){
        return getFieldValue(this.lead.data, 'Lead.City');
    }

    get accountPostal(){
        return getFieldValue(this.lead.data, 'Lead.PostalCode');
    }

    get accountCountry(){
        return getFieldValue(this.lead.data, 'Lead.Country');
    }

    get accountState(){
        return getFieldValue(this.lead.data, 'Lead.State');
    }

    handleChange(event){
        this.companyAddress.street = event.detail.street;
        this.companyAddress.city = event.detail.city;
        this.companyAddress.postal = event.detail.postalCode;
        this.companyAddress.state = event.detail.province;
        this.companyAddress.country = event.detail.country;
        console.log(this.companyAddress);
    }

    get countryOptions(){
        return [
            { label: 'US', value: 'US'}
        ]
    }

    get stateOptions() {
        return [
            { label: 'AL', value: 'AL'},
            { label: 'AK', value: 'AK'},
            { label: 'AZ', value: 'AZ'},
            { label: 'AR', value: 'AR'},
            { label: 'CA', value: 'CA'},
            { label: 'CO', value: 'CO'},
            { label: 'CT', value: 'CT'},
            { label: 'DE', value: 'DE'},
            { label: 'DC', value: 'DC'},
            { label: 'FL', value: 'FL'},
            { label: 'GA', value: 'GA'},
            { label: 'ID', value: 'ID'},
            { label: 'IL', value: 'IL'},
            { label: 'IN', value: 'IN'},
            { label: 'IA', value: 'IA'},
            { label: 'KS', value: 'KS'},
            { label: 'KY', value: 'KY'},
            { label: 'LA', value: 'LA'},
            { label: 'ME', value: 'ME'},
            { label: 'MD', value: 'MD'},
            { label: 'MA', value: 'MA'},
            { label: 'MI', value: 'MI'},
            { label: 'MN', value: 'MN'},
            { label: 'MS', value: 'MS'},
            { label: 'MO', value: 'MO'},
            { label: 'MT', value: 'MT'},
            { label: 'NE', value: 'NE'},
            { label: 'NV', value: 'NV'},
            { label: 'NH', value: 'NH'},
            { label: 'NJ', value: 'NJ'},
            { label: 'NM', value: 'NM'},
            { label: 'NY', value: 'NY'},
            { label: 'NC', value: 'NC'},
            { label: 'ND', value: 'ND'},
            { label: 'OH', value: 'OH'},
            { label: 'OK', value: 'OK'},
            { label: 'OR', value: 'OR'},
            { label: 'PA', value: 'PA'},
            { label: 'RI', value: 'RI'},
            { label: 'SC', value: 'SC'},
            { label: 'SD', value: 'SD'},
            { label: 'TN', value: 'TN'},
            { label: 'TX', value: 'TX'},
            { label: 'UT', value: 'UT'},
            { label: 'VT', value: 'VT'},
            { label: 'VI', value: 'VI'},
            { label: 'VA', value: 'VA'},
            { label: 'WA', value: 'WA'},
            { label: 'WV', value: 'WV'},
            { label: 'WI', value: 'WI'},
            { label: 'WY', value: 'WY'},
        ];
    }

    saveForm(){
        fields[STREET_FIELD.fieldApiName] = this.companyAddress.street;
        fields[CITY_FIELD.fieldApiName] =  this.companyAddress.city;
        fields[POSTALCODE_FIELD.fieldApiName] = this.companyAddress.postal;
        fields[STATE_FIELD.fieldApiName] = this.companyAddress.state;
        fields[COUNTRY_FIELD.fieldApiName] = 'United States';

        console.log('Fields: ', fields);

        const recordInput = {
            fields
        };

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

            updateRecord(recordInput)
                .then(() => {
                    console.log('Update Successful');
                })
                .catch(error => {
                    console.error(error);
                });

    }
}
  • Here you are able to first get the values of the address field on the record and populate them into into the 'CompanyAddress' Object or you can define those values using the @wire.
  • Here I am also defining the possible values for state & country. I believe you can also grab these dynamically instead of defining them -Changes are handled and the company address object is updated to then use on record save.

end result looks like: enter image description here

Hope this helps.

Correct answer by Max on December 28, 2020

Add your own answers!

Related Questions

Set Padding on Minimum Width [Aura]

1  Asked on October 4, 2021 by al-k

   

restrict past dates in lightning:input

1  Asked on October 4, 2021 by krishna-casukhela

 

Why is SystemModStamp missing updates?

1  Asked on October 4, 2021 by sebthu

 

Marketing Cloud Barcodes

0  Asked on October 4, 2021 by john-green

     

Comments in Salesforce contact email address

0  Asked on October 4, 2021 by andrey-osh

   

SOQL Parser implementation in Apex

1  Asked on October 4, 2021 by robert-ssemann

       

How to find code deprecated by Salesforce?

1  Asked on October 4, 2021 by sf-ninja

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved.