Populating a field on-load of Record Edit Form in Lightning Web Component

Use Case:- We are using lightning-record-edit-form to create Contact record associated to an Account. We need to populate the account id in Contact form placed on Account record page in Lightning Experience.

Solution:- We have our Lightning Web Component which uses the lightning-record-edit-form to create contact record form to create a record.

myRecordEditForm.html

<template>
    <lightning-card title={cardTitle}
        icon-name="custom:custom85">
        <div class="slds-m-around_medium">
            <lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess}>
                <lightning-messages>
                </lightning-messages>
                <lightning-input-field field-name="Name">
                </lightning-input-field>
                <lightning-input-field field-name="AccountId" value={recordId}>
                </lightning-input-field>
                <lightning-input-field field-name="Title">
                </lightning-input-field>
                    <lightning-button
                        class="slds-m-top_small"
                        type="submit"
                        label="Create new">
                    </lightning-button>
            </lightning-record-edit-form>
        </div>
    </lightning-card>
</template>

Highlights:- We are using value attribute of lightning-input-field to bind it with current account record id using recordId property.

myRecordEditForm.js

import { LightningElement,track,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class MyRecordEditForm extends LightningElement {
    @api recordId;
    @track cardTitle='New Contact';
    
    handleSuccess (){
        const evt = new ShowToastEvent({
            title: "Success!",
            message: "The Contact's record has been successfully saved.",
            variant: "success",
        });
        this.dispatchEvent(evt);
    }
    
}

Highlights:- We are using track and api decorators to bind the properties we have used in html markup. Also, We are firing a toast message after record gets saved successfully.

myRecordEditForm.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="myRecordEditForm">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Contact Card</masterLabel>
    <description>This component shows the new contact record form.</description>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Highlights:- We are exposing component only to account record page so that functionality works properly.

Demo