2

I have a Lightning RecordEditForm on a page that I'd like use multiple times. After a successful submit I want to clear the user's entries to allow the form to be reused. I have been unsuccessful at clearing RecordEditForm InputField component values in the onsuccess callback of the form.

Here is what I am trying:

Component

<lightning:recordEditForm aura:id="createAccount"
                            objectApiName="Account"
                            onsuccess="{!c.saveComplete}">
    <lightning:messages />
    <lightning:inputField fieldName="Name"
                            aura:id="accountNameField" />
    <lightning:button aura:id="submit"
                        variant="brand"
                        type="submit"
                        label="Create Account"
                        class="slds-m-top_medium" />
</lightning:recordEditForm>

Controller

saveComplete: function (component, event, helper) {
    helper.getAccountList(component);

    // Grab inputField needing to be reset.  Attempt to change it.
    var cmp = component.find("accountNameField");
    console.log("current value: " + cmp.get("v.value"));    // Display current value

    cmp.set("v.value", "a new value");                      // Change it (hopefully)

    console.log("new value: " + cmp.get("v.value"));        // Display updated value
},

Console output

current value: cccc
new value: cccc

The user's inputed value does not change on the screen nor in the inputfield component attribute.

What is the proper way to reset a recordeditform inputfield after a submit completes?

  • 1
    Probably destroying the component and then dynamically creating it. – Pranay Jaiswal Aug 3 '18 at 17:42
  • @PranayJaiswal, you're right, that works. It's not a technique I'd used before. And, I hate it. I really want my xml in the .cmp file and the business logic in the .js, and the two not mixing. That said, if someone else doesn't post a better solution, I'll share this code. – Andy Schwartz Aug 4 '18 at 2:12
6

I guess you can add your lightning:recordEditForm inside the aura:if and reset the flag variable used in aura:if in insaveComplete() method .This will refresh the form.

| improve this answer | |
  • Thank you Rohan. This worked and was easier than recreating the form in javascript (per comment in original question). – Andy Schwartz Aug 7 '18 at 22:01
  • 2
    @Rohan -- Would you mind giving an example? I think you're saying the answer is to wrap the whole recordEditForm inside an aura:if, and then change the value of the variable used in the isTrue value. This does work for me the first time -- the form is cleared -- but after that, I can't address the form. Example: cmp.find('myRecordEditForm').submit() doesn't work because myRecordEditForm isn't found. – Shane Steinfeld Oct 28 '18 at 23:29

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.