2

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();
    }
  • can you share your code and the component picture also – User6670 Feb 4 at 13:18
  • added code snippet – user36778 Feb 4 at 13:22
  • do you have any css file coz same code is displaying all the fields to me – User6670 Feb 4 at 13:30
  • no css is there. I am just using html & js. – user36778 Feb 4 at 13:32
  • you do have right access to those fields in your profile? – User6670 Feb 4 at 13:36
0

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">
| improve this answer | |
  • 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 at 14:00
  • did you add anything else in above code – User6670 Feb 4 at 14:04
  • yes, added <lightning-input-field field-name='RecordTypeId'></lightning-input-field> – user36778 Feb 4 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 at 14:16

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.