0

I created a modal to create a contact record with specific field.

enter image description here

I want that when I hide my modal or submit my contact fields would be empty and retain the old values inputted.

closeModel: function(component, event, helper) {
    var cmpTarget = component.find('Modalbox1');
    var cmpBack = component.find('Modalbackdrop');
    $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
    $A.util.removeClass(cmpBack, 'slds-backdrop--open');
    component.find("FirstName").set("v.value", "");
    component.find("LastName").set("v.value", "");
    component.find("Email").set("v.value", "");
    component.find("Birthdate").set("v.value", "");
    component.find("MobilePhone").set("v.value", "");

},

This is my Modal

   <lightning:recordEditForm aura:id="createContactForm"
                                  onsubmit="{!c.handleSubmit}"
                                  onsuccess="{!c.handleShowToastEvent}"
                                  objectApiName="Contact"> 
         <lightning:messages />             
            <div class="slds-modal__content slds-p-around--medium">           
                <div class="slds-grid slds-p-top_x-small">
                    <lightning:inputField fieldName="FirstName" />
                    <lightning:inputField fieldName="AccountId" value="{!v.AccountId}"  class="slds-hide"/>
                </div>
                <div class="slds-grid slds-p-top_x-small">
                    <lightning:inputField fieldName="LastName" />
                </div>
                <div class="slds-grid slds-p-top_x-small">
                    <lightning:inputField fieldName="Email"/>
                </div>
                <div class="slds-grid slds-p-top_x-small">
                    <lightning:inputField fieldName="Birthdate"/>
                </div>
                <div class="slds-grid slds-p-top_x-small">
                    <lightning:inputField fieldName="MobilePhone"/>
                </div>
            </div>   
            <div class="slds-modal__footer">
                <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save"/>
                <lightning:button label="close" onclick="{!c.closeModel}" />
            </div>
       </lightning:recordEditForm>
1
  • try component.find("FirstName").reset() to reset the field values. Commented Jul 7, 2020 at 11:54

1 Answer 1

0

You can provide the aura:id to the input fields which you want to reset and then loop onto each lightning:inputField call the reset() method.

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
        <lightning:recordEditForm objectApiName="Account" recordId="{!v.recordId}">
            <lightning:messages />
            <lightning:inputField aura:id="field" fieldName="Name" />
            <lightning:inputField aura:id="field" fieldName="Industry" />
    
                <div class="slds-m-top_medium">
                <lightning:button label="Cancel" onclick="{!c.handleReset}" />
                <lightning:button type="submit" label="Save Record" />
            </div>
        </lightning:recordEditForm>
    </aura:component>

Call the reset() method on each field.

({
    handleReset: function(cmp, event, helper) {
        cmp.find('field').forEach(function(f) {
            f.reset();
        });
    }
})

You must log in to answer this question.

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