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:
Hope this helps.
