Easiest way to get a value from a lightning:inputField

  • I want to get the value from a lightning:inputField, but I can't.

    Component:

    <aura:attribute name="myAttribute" type="String"/>
    {!v.myAttribute}
    
    <lightning:recordEditForm objectApiName="Lead" onsubmit="{!c.submit}">
        <lightning:inputField aura:id="myatt" fieldName="MyAtt__c" value="{!v.myAttribute}" label="Attribute"/>
    </lightning:recordEditForm>
    

    It seems like you can't set the value of an inputField? I've tried accessing this value both within the component using {!v.myAttribute}, in the controller with component.get("v.myAttribute") and with myAtt = component.find("myatt"); myVal = myAtt.get("v.value").

    All are undefined.

    Here is full code:

    component:

    <aura:component implements="force:hasRecordId,flexipage:availableForRecordHome">
    <aura:attribute name="myAttribute" type="String"/>
    
        {!v.myAttribute}
    
    <lightning:recordEditForm objectApiName="Lead" onsubmit="{!c.submit}">
        <lightning:inputField aura:id="myAtt" fieldName="Company" value="{!v.myAttribute}" label="Attribute" onchange="{!c.myChange}"/>
    </lightning:recordEditForm>
    

    Controller:

    ({
        submit: function(component, event, helper){
            console.log('hi');
        },
        myChange: function(component, event, helper){
            console.log('hi');
            var myEle = component.find("myAtt");
            console.log(myEle);
            var myAttri = component.find("myAtt").get("v.value");
            console.log(myAttri);
        }
    })
    

    It is working for me. there might be something else which is causing the problem.

    Would you mind commenting out your `myAttribute` attribute out of your code, and removing the `value` attribute from the input field component? Tell us if you still get undefined results then.

    If that solved your issue, please mark my answer as the solution. :)

  • Assuming your lightning:inputField tag has the aura:id of firstNameField, for example, you'd get its value with:

    var firstName = component.find("firstNameField").get("v.value");
    

    In your second example, in your find call, you are using an uppercase A, whereas in your code the aura:id has a lowercase a:

    "myAtt" != "myatt"
    

    I've had some questions regarding the recordEditForm before too. This might be useful.

    Edit:

    I think your attribute might also be conflicting. Would you mind commenting out your myAttribute attribute out of your code, and removing the value attribute from the input field component?

    Thanks Renato - actually the spelling mistake was only in the question, not in my actual code. In my code, I have the correct Id name, I retrieve the element in question, but the value is 'undefined'.

    That's weird. Can you post the rest of your component and controller source codes?

    Yes, I've added the full code above.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM