Lightning Components: How to refresh force:recordEdit after saving

Question

I have a Lightning Component displaying a force:recordEdit on a flexipage. The flexipage itself is used to display a Contact View. Now my lightning component should add a recordEdit for the corresponding Account (i.e Contact.AccountId).

This works fine but when I implement a Save mechanism it saves the record exactly one time successfully. When I go on editing and save again, I get

Review the errors on this page. This record was modified by Uwe Heim during your edit session. Make a note of the data you entered, then reload the record and enter your updates again.

I need a way to refresh the force:recordEdit. Unfortunately not even the provided reload button works. The error stick until I refresh the entire page by pressing F5.

What I've tried so far:

• $A.get('e.force:refreshView').fire(); seems not to have any impact on my custom force:recordEdit

Markup

<aura:component access="global"  
    controller="elfBCAura_recordDetail"
    implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:hasSObjectName" 
>
    <aura:attribute name="recordId"         type="String" />
    <aura:attribute name="sObjectName"      type="String" />
    <aura:attribute name="name"             type="String"           default="Name"          access="global" />
    <aura:attribute name="itemId"           type="String" />
    <aura:handler name="init"           value="{!this}"                 action="{!c.doInit}" />
    <aura:handler name="onSaveSuccess"  event="force:recordSaveSuccess" action="{!c.saveSuccessHandle}"/>
    <ui:button label="Refresh" press="{!c.refresh}"/>
    <ui:button label="Save" press="{!c.save}"/>
    <force:recordEdit aura:id="recordEdit1" recordId="{!v.itemId}" />
</aura:component>

Controller

({
    doInit : function(cmp, evt, hlp) {
        var action = cmp.get("c.getItemId");
        action.setParams({
          "contactId"                           : cmp.get("v.recordId"),
        });
        var self = this;
        action.setCallback(this, function(a) {
            console.log(a.getReturnValue());
            cmp.set("v.itemId", a.getReturnValue());
        });
        $A.enqueueAction(action);        
    },

    save : function(cmp, evt, hlp) {
        cmp.find("recordEdit1").get("e.recordSave").fire();
    },

    saveSuccessHandle : function(cmp, evt, hlp) {
        $A.get('e.force:refreshView').fire();
    },

    refresh : function(cmp, evt, hlp) {
        $A.get('e.force:refreshView').fire();
    },
})

APEX

public class elfBCAura_recordDetail { 
    @AuraEnabled public static String getItemId( Id contactId ) {
        Contact c = [ select AccountId from Contact where Id = :contactId ] 
        return [ select Id from Account where Id = :c.AccountId limit 1 ' )[0].Id;
    }
}

Answer 1

As far as I was able to see, the only way of refreshing the component is to recreate dynamically with $A.createComponent()

I'm still looking for better alternatives.

Answer 2

Have you try something like

<aura:handler event="force:showToast" action="{!c.refresh}" />

Answer 3

Try adding your force:recordEdit inside the aura:if and reset the flag variable used in aura:if in saveSuccessHandle() method .This will refresh the form.