I am creating a custom LWC component to create a new Address record. I've used the lightning-record-edit-form like below,
<template>
<lightning-record-edit-form record-id={currenRecordId} object-api-name={currenObjectAPIName} onsuccess={handleSuccess} onsubmit ={handleSubmit}>
<lightning-messages>
</lightning-messages>
<lightning-input-address
address-label="Address"
street-label="Street"
city-label="City"
country-label="Country"
province-label="State/ Province"
postal-code-label="Zip/ Postal Code"
onchange={addressInputChange}
show-address-lookup>
</lightning-input-address>
<lightning-input-field field-name="Address" hidden></lightning-input-field>
<lightning-input-field field-name='Account__c'></lightning-input-field>
<lightning-input-field field-name='LocationType'></lightning-input-field>
<lightning-input-field field-name='AddressType'></lightning-input-field>
<lightning-input-field field-name='ParentId'></lightning-input-field>
<lightning-button class="slds-m-top_small" type="submit" label="Create Address">
</lightning-button>
</lightning-record-edit-form>
When I hit the Create Address button, I need to modify the Address objects Address field with the pre populated address in lightning-input-address component via show-address-lookup (Google Maps lookup).
Will it possible to update the Address field in JS side?
import { LightningElement, api, track } from 'lwc';
export default class AddressValidation extends LightningElement {
@track details = {};
@api recordId;
@api objectApiName;
@track currenRecordId;
@track currenObjectAPIName;
connectedCallback() {
this.currenRecordId = this.recordId;
this.currenObjectAPIName = this.objectApiName;
}
handleSuccess(event) {
console.log('onsuccess event recordEditForm',event.detail.id)
}
handleSubmit(event) {
event.preventDefault(); // stop the form from submitting
const fields = event.detail.fields;
fields.Address.Street = this.details.street;
this.template.querySelector('lightning-record-edit-form').submit(fields);
console.log('onsubmit event recordEditForm'+ event.detail.fields.Address);
console.log('onsubmit event recordEditForm'+ event.detail.fields.Address.Street);
console.log('onsubmit event recordEditForm'+ event.detail.fields.Address.checkValidity);
}
addressInputChange(event){
const address = this.template.querySelector('lightning-input-address');
console.log('Street is ' , event.target.street);
console.log('City is ' , event.target.city);
console.log('Province is ' , event.target.province);
console.log('Country is ' , event.target.country);
console.log('postal Code is ' , event.target.postalCode);
this.details['street'] = event.target.street;
this.details['city'] = event.target.city;
this.details['province'] = event.target.province;
this.details['country'] = event.target.country;
this.details['postalCode'] = event.target.postalCode;
console.log('Address' + JSON.stringify(this.details));
}
}