0

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

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.

1
  • yes, tried it. But getting the JS error. I'll update the question. – Hariprasath Feb 1 at 4:45
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.