How can I show "lightning-record-edit-form" in a modal using LWC

Question

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:

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

            <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">
                                </lightning-icon>
                                <span class="slds-assistive-text">Close</span>
                            </button>
                            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Create New Opportunity</h2>
                        </header>
                        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                            <center>
                                This is modal text

                                <lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess}>
                                    <lightning-messages></lightning-messages>
                                    <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">
                                            </lightning-button>
                                        </div>
                                    </div>
                                </lightning-record-edit-form>

                            </center>
                        </div>
                        <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>
                        </footer>
                    </div>
                </section>
                <div class="slds-backdrop slds-backdrop_open"></div>
            </div>
            </template>
        </div>       


     </template>

JS file:

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

        this.closeModal();
    }

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">