lightning:recordEdit get onSubmit to fire when calling submit from controller

Question

Similar to this question posted last year. I am calling the submit function from a lightning:recordEdit from the js controller. However, in my use case the form is creating a new record, and I now want to get the id of that record after it is created so the parent component can use it. The button for submitting/saving the record lives on the parent component.

As noted in the comments in the previously linked question, the onSubmit function does not get called when submitting in this way - how can I get the Id of the record that was created?

component code:

<lightning:recordEditForm
  aura:id="recordForm"
  recordId="{!v.recordId}"
  objectAPIName="My_Object__c"
  onSubmit="{!c.handleSubmit}">
    <lightning:inputField fieldName="Name" />
</lightning:recordEditForm>

my controller code:

var record = component.find('recordForm');
record.submit();

I've tried doing:

var record = component.find('recordForm');
var res = record.submit();

However res is undefined in this scenario.

Answer 1

When you create new record, you do not have record id before submit and so you cannot get it in onsubmit event. Instead you should be using onsuccess event.

You can use the same way to submit from linked question - no need to change that

update : function(component,event,helper) {
   component.find("editForm").submit();
}

Now, to get the created record id, you need to handle onsuccess event:

<lightning:recordEditForm
        onload="{!c.handleLoad}"
        onsubmit="{!c.handleSubmit}"
        onsuccess="{!c.handleSuccess}"

Now, in handleSuccess method, you can get id from event param:

handleSuccess: function(cmp, event, helper) {
    var params = event.getParams();
    cmp.set('v.recordId', params.response.id);
}

You can check documentation for further info.

Answer 2

Jason, here is an example of field validation when using a button outside of the RecordEdit form.

Component Markup:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >

    <lightning:recordEditForm objectApiName="Account"
                              recordId="0010V00002QteWtQAJ"
                              onsubmit="{!c.handleSubmit}">

        <lightning:messages />

        <lightning:inputField fieldName="Name" />
        <lightning:inputField fieldName="Website" />

        <button id="{!globalId + '_submit'}" type="submit" class="hidden_field"/>

    </lightning:recordEditForm>

    <lightning:button variant="brand" type="submit" name="save" label="Save" onclick="{!c.submitForm}"/>

</aura:component>

Controller:

({
    submitForm :  function(component, event, helper) {

        var globalId = component.getGlobalId();
        document.getElementById(globalId + '_submit').click();

    },
    handleSubmit : function(component, event, helper) {

        // Get the fields.
        var fields = event.getParam('fields');

        // List the fields.
        console.dir(JSON.parse(JSON.stringify(fields)));

        // Example verification...
        if (fields.Website == 'https://www.example.com') {
            console.log('Website is www.example.com... record not saved.')
            event.preventDefault();
        }

    }
})

CSS (this alternatively, this could be placed directly in the style attribute of the button):

.THIS .hidden_field {
    display:none;
}