LWC: Alignment lost when using Name in Lightning-record-edit-form

Question

I have a requirement to mimic the create contact form in LWC. For this, I am using lightning-rec-rd-edit-form. When I use Name field, it consumes 4 rows as it has Salutation, First name, Middle name, Last name. Thus, when I try to add the columns row-wise(next to FirstName), the fields are not getting added while it is getting added below.

For example,

I want Address field to appear next to the First name. Can someone please let me know what modifications I need to do.

Below is the LWC code:

<template>
    
    <h3 class="label slds-truncate slds-p-around_x-small slds-theme_shade">
        <span class="slds-truncate" title="Contact Information"> Contact Information </span>
    </h3>
    <lightning-record-edit-form
    object-api-name="Contact"
    record-id="0038I00000LQAR"
    >
    <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-2">
                <lightning-input-field field-name="Name"></lightning-input-field>
            </div>
            <div class="slds-col slds-size_1-of-2">
                <lightning-input-field field-name="Email"></lightning-input-field>
            </div>
            <div class="slds-col slds-size_1-of-2">
                <lightning-input-field field-name="CNG_Address__c"></lightning-input-field>
            </div>
        </div>
    
    </lightning-record-edit-form>
</template>

PS: Please let me know if there is any open repos where I can get the exact replica of the create form in the LWC. I do not want to use lightning-record-form

Answer 1

As mentioned by @Raul, you need to have separate fields for FirstName, LastName, MiddleName & Salutation.

For 2 column layout using slds , you can use below code :

<div class="slds-grid slds-wrap">
    <div class="slds-col slds-size_1-of-2">
        <lightning-input-field class="slds-col" field-name="Salutation"></lightning-input-field>
    </div>
    <div class="slds-col slds-size_1-of-2">
        <lightning-input-field class="slds-col" field-name="Email"></lightning-input-field>
    </div>
    <div class="slds-col slds-size_1-of-2">
        <lightning-input-field class="slds-col" field-name="FirstName"></lightning-input-field>
    </div>
    <div class="slds-col slds-size_1-of-2">
        <lightning-input-field class="slds-col" field-name="CNG_Address__c"></lightning-input-field>
    </div>
    <div class="slds-col slds-size_1-of-2">
        <lightning-input-field field-name="MiddleName"></lightning-input-field>
    </div>
    <div class="slds-col slds-size_1-of-2">
        <lightning-input-field field-name="LastName"></lightning-input-field>
    </div>
</div>

Reference : https://www.lightningdesignsystem.com/utilities/grid/

Also , if you do not want to use lightning-record-edit-form, you need to use lightning-input with apex method. Related answer. :Update records in LWC using Apex

For only record creation , you can use standard functions as shown here

Github repo: https://github.com/trailheadapps/lwc-recipes/tree/main/force-app/main/default/lwc/ldsCreateRecord