[SalesForce] Lightning:inputField not retrieving the value in JS Controller

 <aura:component description="detail_page" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId"     controller="DetailController" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />    
    <aura:attribute name="Opportunity" type="Object" 
                    description="The record object to be displayed"/>
    <aura:attribute name="OpportunityRecord" type="Object" 
                    description="A simplified view record object to be displayed"/>
    <aura:attribute name="recordSaveError" type="String" 
                    description="An error message bound to force:recordData"/>
    <aura:attribute name="recordId" type="String"/>
    <force:recordData aura:id="recordHandler" 
                      layoutType="FULL" 
                      recordId="{!v.recordId}"  
                      targetRecord="{!v.Opportunity}"
                      targetError="{!v.recordSaveError}"
                      targetFields="{!v.OpportunityRecord}"

                      mode="EDIT"
                    /> 

    <div aura:id="firstSection">                           
        <lightning:recordEditForm aura:id="recordEditForm" 
                              objectApiName="Opportunity"
                              recordTypeId="{!v.recordId}">                            
             <lightning:inputField fieldName="Bank_Account_Number__c" value="{!v.OpportunityRecord.Bank_Account_Number__c}"/> 
       </lightning:recordEditForm>

     </div>
</aura:component>

JS Controller

saveRecord : function(component, event) {

        var action = component.get("c.updateOpportunityRecord");
        console.log(JSON.stringify(component.get("v.OpportunityRecord.Bank_Account_Number__c")));
        action.setParams({
            "opp": component.get("v.Opp")
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            console.log('state--'+state);            
            if (component.isValid() && state === "SUCCESS") {
                // component.set("v.opp", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);       
    }
    console.log(JSON.stringify(component.get("v.OpportunityRecord.Bank_Account_Number__c")));

The console logs shows the correct value when lightning:input or ui:inputText is used, but showss undefined when lightning:inputField is used.

How can I successfully use a lightning:inputField?

Best Answer

You are using a combination of LDS and ligthning:recordEditForm in your code, which you should first fix. If you use lightning:inputField within a ligthning:recordEditForm, then you don't really need to provide the value attribute, just providing the fieldName will render the value there.

As to answer your question:

How can I successfully use a lightning:inputField?

Once you fix your code to use the record edit form and input field appropriately, you need to assign an "id" to the input field and use that in your JS to retrieve its value. As an example, your input field becomes something as:

<lightning:inputField aura:id="bankAccountNumber" fieldName="Bank_Account_Number__c"  />

And then, access this in your JS to get the value as:

var bankAccountNumber= component.find("bankAccountNumber").get("v.value");
Related Topic