How to read lightning:recordEditForm Object instead of using API

Question

I got 3 lightning:recordEditForm components on a wizard (3 pages handled by slds-hide/show) to capture details. At the last wizard page it must save first object, and 2nd object must get first object's Id to save (as dependent object), and so does 3rd wizard page object (needs first and second object ids).

In summary There are 3 dependent objects on 3 consecutive pages accordingly which needs to be saved at final page submission.

I'm trying to get the Object/field values on each Object at last page, and send it to Apex controller for validations, further process and saving in one transaction.

This looks hard to achieve as it seems lightning:recordEditForm does not have an easy way to access the associated Object record instance.

I tried to use force:RecordData but still it seems does not update the values.

Lightning component code segment (Wizard page)

    <aura:attribute name="fdw" type="Object"/>
    <div aura:id="contactPage" class="{!(v.currentStep==1) ? '' : 'slds-hide' }">
        <force:recordData aura:id="recordContactLoader"
                          recordId="{!v.fdw.con.Id}"
                          targetFields="{!v.fdw.con}"
                          />       
        <lightning:recordEditForm aura:id="conRecEdit" objectApiName="Contact" recordId="{!v.fdw.con.Id}">
            <lightning:messages />

            <aura:iteration items="{!v.fdw.formCon.fieldRows}" var="fr">
                <lightning:layout>
                    <aura:iteration items="{!fr.fields}" var="f">
                        <lightning:layoutItem  flexibility="auto" padding="around-small">
                            <lightning:inputField fieldName="{!f.APIName}" />   
                        </lightning:layoutItem>
                    </aura:iteration>
                </lightning:layout>
            </aura:iteration>
        </lightning:recordEditForm>
    </div>

Next button code

goNext: function(component, event, helper) {
    var currentStep = component.get("v.currentStep");
     if (currentStep < 4)
         component.set("v.currentStep", currentStep + 1);

    var fdw = component.get("v.fdw");
    console.log('fdw.con '+JSON.stringify(fdw.con));

    var conEd = component.find("conRecEdit");
    console.log(conEd.get("v.body"));

},

My question is simply, how to read the Object/fields associated with each of Lightning:RecordEditForms?

Note: It seems not possible to use Submit() or onSubmit() as I need custom validations, dependent object updates while saving.

In the meantime I'm now trying to read component's body, and find way to read fields and their values at last resort.

Any helpful thoughts, suggestions are much appreciated. Thanks!

Answer 1

Found this (not the Best) workaround to get Object/field values.

1. Instead of Wizard page buttons, used Next/Back buttons on each Lightning:RecordEditForm (bottom of page).
2. Made the Next button type="submit", handled navigation in onClick() of button, now it fires onSubmit of RecordEditForm
3. onSumbit event flushes the edited field values to my own sobject record instances.
4. Finally on Save button, going to use own method call to Apex to save all objects in one call.

Note: submit() method call of Lightning:RecordEditForm doesn't seem to fire it's onSumbit event.

Answer 2

Normally, for client side validaiton of input fields/values in lighting:recordEditForm's, I add an aura:id to the fields, and or/do my "validation" on field change or blur.

This is generally more intuitive than having to wait for clicking on next to see if any fields are not properly filled in.

If for whatever reason you need to perform the validation all at once, as you are doing, then, I generally use cmp.find('auraid') and iterate over the fields to do the necessary validations.

Its not clear wht type of validation(s) you are doing, so, its hard to advise the best way to do so, but as you mentioned, the object is accessible only on submit or after successfully submiting the form.

Genrerally speaking, you want to avoid using apex when leveraging this component (I mean, after all, in part, its the point of using it =P ).

Answer 3

You may capture your Object from force:recordData by using the Edit Save functions on your JS controller.

Example:

.cmp

 <force:recordData aura:id="recordContactLoader"
        recordId="{!v.recordId}"
        targetFields="{!v.currentRecord}"
        fields="{!v.recordFieldsLoan}"
        targetError="{!v.recordLoadError}" 
        mode="EDIT"
        recordUpdated="{!c.handleRecordUpdated}"/>

.js

 component.find("recordContactLoader").saveRecord(function(saveResult) {
   if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
         //saveResult will hold all saved values
         console.log(saveResult); 
    });
  }

Documentation https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/data_service_save_record.htm