lightning:recordEditForm issues onload and onsubmit function

Question

I am frustrated with lightning:recordEditForm.

Here is the description of the issue:

Problem statement:

I want to have a form where user can select fields of a custom object "Opportunity_Product__c", but I want to set Opportunity__c lookup field from the controller.

The form is inside a lightning component, which is being created inside a VF page and the VF page is a inline page on Opportunity page layout.

I had two approaches:

1. Set the Opportunity__c field at onload event, but hide the field using CSS.

Aftermath: onload is working fine, when I am opening the Opportunity record in lightning. In classic however, both Chrome and Mozilla browsers are hanging and page is becoming unresponsive.

2. Don't populate field, but set the value at onsubmit event.

Aftermath: whenever I am trying to using onsubmit event, a weird exception is being thrown from the framework, after being clicked from Submit button.

"This page has an error. You might just need to refresh it. Error in $A.getCallback() [b.run is not a function] Failing descriptor: {lightning:recordEditForm}"

And I found no help on the internet, regarding b.run exception.

I don't know what is wrong with the code. Please help.

Code is below:

Markup:

<lightning:recordEditForm aura:id="myform" objectApiName="Opportunity_Product__c" onload="{!c.handleOnload}" 
            onerror="{!c.handleError}" onsubmit="{c.handleSubmit}" onsuccess="{!c.handleSuccess}">  
        <lightning:messages />
        <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_striped">
            <!-- Table Row -->
            <tr scope="row">
                <!--td>{!v.rowIndex + 1}</td-->
                <!--label for="Product2Id">Product</label-->
                <div aura:id="opptyDiv"><td><lightning:inputField aura:id="oppty" fieldName="Opportunity__c" /></td></div>
                <td><lightning:inputField fieldName="Product__c" /></td>
                <td><lightning:inputField fieldName="Type__c" /></td>
                <td><lightning:inputField fieldName="Selling_Mode__c" /></td>
                <td><lightning:inputField fieldName="Start_Date__c" /></td>
                <td><lightning:inputField fieldName="Duration__c" /></td>
                <td><lightning:inputField fieldName="Quantity__c" /></td>

                <td><div class="slds-m-top_medium">
                    <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
                    </div>
                </td>
            </tr>
        </table>
    </lightning:recordEditForm>

JS Controller:

handleError : function(component, event, helper) {
    //var payload = event.getParams().response;
    console.log(event.getParams());
},
handleSubmit : function(component, event, helper) {
    event.preventDefault();       // stop the form from submitting
    var fields = event.getParam('fields');
    console.log('fields = '+fields);
    var opptyRecordId = component.get("v.opptyRecordId");
    console.log('opptyRecordId = '+opptyRecordId);
    fields["Opportunity__c"] = opptyRecordId;   // passing whatever you want here
    component.find("myform").submit(fields);
},
handleSuccess : function(component, event) {
    var updatedRecord = JSON.parse(JSON.stringify(event.getParams()));
    console.log('onsuccess: ', updatedRecord.id);

    var opptyId = component.get("v.opptyRecordId");
    component.set("v.isButtonRender",true);
    component.set("v.isTableRender",false);
    component.set("v.choosePB",false);
    component.set("v.addProducts",false);
    helper.fetchData(component, /*fetchData,*/ opptyId);
},
handleOnload : function(component, event, helper) {
    var opptyId = component.get("v.opptyRecordId");

    // requires inputFields to have aura:id
    component.find("oppty").set("v.value", opptyId);

    //var toggleText = component.find("oppty");
    var toggleText = component.find("opptyDiv");
    $A.util.toggleClass(toggleText, "hide");
}

Answer 1

I am working through a similar problem and found this issue in my code, and it is present in yours as well. I was missing a bang (!) on my onerror method, and you are missing a bang (!) on the submit method.