lightning-record-edit-form with lightning-input-address show-address-lookup to true to create an Address record

Question

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

Answer 1

Have you tried with the below code?

handleSubmit(event){
   event.preventDefault();       // stop the form from submitting
   const fields = event.detail.fields;
  
   //do changes to Address field as below
   fields.Address = '32 Prince Street';

   this.template.querySelector('lightning-record-edit-form').submit(fields);
}

Also, show-address-lookup attribute is used for autofill purpose. So whatever value you have chosed, it should be editable in submit function. Just check if the update you are doing is a valid address data.

Answer 2

I could able to achieve it by following,

Template File

    <lightning-card title="CreateRecord - Address" icon-name="standard:record">
        <div class="slds-m-around_medium">
            <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"
                street={addressStreet}
                city={addressCity}
                province={addressState}
                postal-code={addressPostal}
                country={addressCountry}
                onchange={addressInputChange}
                show-address-lookup>
            </lightning-input-address>

            <lightning-record-edit-form record-id={currenRecordId} object-api-name={currenObjectAPIName} >

                <lightning-messages>
                </lightning-messages>
                <lightning-input-field field-name='Account__c' onchange={handleAccountChange} name='account'></lightning-input-field>
                <lightning-input-field field-name='LocationType' onchange={handleLocationTypeChange} name='locationType'></lightning-input-field>
                <lightning-input-field field-name='AddressType' onchange={handleAddressTypeChange} name='addressType'></lightning-input-field>
                <lightning-input-field field-name='ParentId' onchange={handleParentIdChange} name='parentId'></lightning-input-field>
                <lightning-button label="Create Address" variant="brand" onclick={createAddress}>
                </lightning-button>
            </lightning-record-edit-form>
        </div>
    </lightning-card>
</template>

JS file

    import { LightningElement, api, track } from 'lwc';

    import { createRecord  } from 'lightning/uiRecordApi';

    export default class AddressValidation extends LightningElement {

    account;
    locationType;
    addressType;
    parentId;

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

    @api recordId;
    @api objectApiName;
    @track currenRecordId;
    @track currenObjectAPIName;

    addressInputChange(event){

        const address = this.template.querySelector('lightning-input-address');
        const isValid = address.checkValidity();
        if(isValid) {
            alert("Creating a new address");
        } else {
            alert("Complete all address fields");
        }

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

    connectedCallback() {
        this.currenRecordId = this.recordId;
        this.currenObjectAPIName = this.objectApiName;
    }
    
    handleAccountChange(event){
        this.account = event.target.value;
    }

    handleLocationTypeChange(event){
        this.locationType = event.target.value;
    }

    handleAddressTypeChange(event){
        this.addressType = event.target.value;
    }

    handleParentIdChange(event){
        this.parentId = event.target.value;
    }
    
    createAddress(){

        // Creating mapping of fields of Address with values
        var fields = {'Account__c' : this.account, 
                    'LocationType' : this.locationType, 
                    'AddressType' : this.AddressType,
                    'ParentId' : this.parentId,
                    'Street' : this.addressAddress.street,
                    'City' : this.addressAddress.city,
                    'PostalCode' : this.addressAddress.postal,
                    'State' : this.addressAddress.state,
                    'Country' : this.addressAddress.country 
                };

        // Record details to pass to create method with api name of Object.
        var objRecordInput = {'apiName' : 'Address', fields};

        // LDS method to create record.
        createRecord(objRecordInput).then(response => {
            alert('Address created with Id: ' +response.id);
        }).catch(error => {
            alert('Error: ' +JSON.stringify(error));
        });
    }
    }

I have to do some customization on the record creation. But the first step is completed to get the address from lightning-input-address input from the Google lookup feature.