<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" 


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


JS Controller

saveRecord : function(component, event) {

        var action = component.get("c.updateOpportunityRecord");
            "opp": component.get("v.Opp")
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                // component.set("v.opp", response.getReturnValue());

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?

  • why are you using lightning:recordEditForm AND force:recordData? shouldnt you be using lightning:recordEditForm ? additionally, lightning:recordEditForm will handle most of the logic for you, why do you need to call the server? which of your forms is triggering saveRecord?
    – glls
    Commented Jun 27, 2018 at 20:06
  • Sorry @glls, I saved my edit just fractionally after yours... oh well :) Commented Jun 27, 2018 at 20:08
  • Because upon save I have to related Parent and child fields
    – user57911
    Commented Jun 27, 2018 at 20:13
  • aren't you able to use/reference 2x lightning:recordEditForm ?
    – glls
    Commented Jun 27, 2018 at 21:22

1 Answer 1


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");
  • Thanks. I think I have to write multiple lightning:RecordEditForm as I have to update more than 40 fields (contains parent object fields as well ) upon clicking save button. How to do this?
    – user57911
    Commented Jun 27, 2018 at 22:45
  • You would need to post that as a different question. The one here specifically addresses what you have asked originally.
    – Jayant Das
    Commented Jun 28, 2018 at 9:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .