I have created a LWC & I am using Modal to show "lightning-record-edit-form" when user clicks on a button. When I use normal text message in modal, it is displayed correctly. However, when I put "lightning-record-edit-form" tag with some input-fields, modal opens but it do not show input form.

Why is this happening? Can I not use "lightning-record-edit-form" in Modal?

HTML file:

        <div class="slds-theme_default">
            <p><b>Show Modal Box using Lightning Web Componentes</b></p><br/><br/>
            <lightning-button label="Show Modal" variant="brand" onclick={openmodal}></lightning-button>

            <template if:true={openmodel}>

            <div class="demo-only" style="height: 640px;">
                <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                    <div class="slds-modal__container">
                        <header class="slds-modal__header">
                            <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                                <lightning-icon icon-name="utility:close" size="medium">
                                <span class="slds-assistive-text">Close</span>
                            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Create New Opportunity</h2>
                        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                                This is modal text

                                <lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess}>
                                    <div class="slds-m-around_medium">            
<lightning-input-field field-name='RecordTypeId'></lightning-input-field>  
                                        <lightning-input-field field-name='LastName'></lightning-input-field>
                                        <lightning-input-field field-name='FirstName'></lightning-input-field>
                                        <lightning-input-field field-name='Email'></lightning-input-field>
                                        <lightning-input-field field-name='AccountId'></lightning-input-field>

                                        <div class="slds-m-top_medium">
                                            <lightning-button variant="brand" type="submit" name="save" label="Create Contact">

                        <footer class="slds-modal__footer">

                            <lightning-button label="Cancel" variant="neutral" onclick={closeModal}></lightning-button>&nbsp;&nbsp;&nbsp;&nbsp;
                            <lightning-button label="Save" variant="brand" onclick={saveMethod}></lightning-button>
                <div class="slds-backdrop slds-backdrop_open"></div>


JS file:

@track openmodel = false;
    openmodal() {
        this.openmodel = true
    closeModal() {
        this.openmodel = false
    saveMethod() {

  • can you share your code and the component picture also
    – User6670
    Feb 4, 2020 at 13:18
  • added code snippet
    – user36778
    Feb 4, 2020 at 13:22
  • do you have any css file coz same code is displaying all the fields to me
    – User6670
    Feb 4, 2020 at 13:30
  • no css is there. I am just using html & js.
    – user36778
    Feb 4, 2020 at 13:32
  • you do have right access to those fields in your profile?
    – User6670
    Feb 4, 2020 at 13:36

1 Answer 1


If you have multiple record type and no default recordtype selected then recordtypeid attribute becomes necessary on lightning-recordeditform.

<lightning-record-edit-form object-api-name="Contact" record-type-id="xxx">
  • I am getting "Cannot read property 'objectInfo' of undefined" error first time when I try to create a record. Do you know why?
    – user36778
    Feb 4, 2020 at 14:00
  • did you add anything else in above code
    – User6670
    Feb 4, 2020 at 14:04
  • yes, added <lightning-input-field field-name='RecordTypeId'></lightning-input-field>
    – user36778
    Feb 4, 2020 at 14:12
  • so i meant adding <lightning-record-edit-form object-api-name="Contact" record-type-id="xxx"> like this can you try doing this
    – User6670
    Feb 4, 2020 at 14:16

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .