Get text value from <lightning:inputField> not working properly

Question

I would like to get the value from lightning:inputField. I want to be able to get the length of the string and ultimately create a keyup event for character length validation. However, I can't directly read the value from lightning:inputField and it seems that two way binding is not working?

Component

<aura:attribute name="longBusinessDescription" type="String" default="" />

<lightning:recordEditForm aura:id="editForm" recordId="{!v.BusinessDetailId}" objectApiName="BusinessDetail__c">
    <lightning:button variant="brand" type="submit" name="save" label="Save" onclick="{!c.saveBusinessDetails}" class="slds-m-top_medium"/>
    <lightning:button variant="brand" name="save" label="Cancel" onclick="{!c.cancelBusinessDetails}" class="slds-m-top_medium"/>
    <lightning:inputField aura:id="LongBusinessDescription" fieldName="LongBusinessDescription__c" value="{!v.longBusinessDescription}"/>
    <div>
       {!v.counter}/500
    </div>
</lightning:recordEditForm>

Controller

({
    doInit : function(component, event, helper) {      
        helper.getBusinessDetailsFieldsHelper(component);           
    },    

    editBusinessDetails : function(component, event, helper) {      
        helper.editBusinessDetailsHelper(component);            
    },

        saveBusinessDetails : function(component, event, helper) {      
        helper.saveBusinessDetailsHelper(component);            
    },

    cancelBusinessDetails : function (component, event, helper)
    {
        helper.cancelBusinessDetailsHelper(component);
    }
})

Helper

getBusinessDetailsFieldsHelper : function(component)
{
    var planId = component.get("v.recordId");
    console.log(planId);

    var action = component.get("c.getBusinessDetailsFields");

    action.setParams({
        "planId" : planId
    });

    console.log('planId = ' + planId);

    action.setCallback(this, function(response) {
        var state = response.getState();
            console.log('state = ' + state);
            var data = JSON.parse(response.getReturnValue());

            component.set("v.BusinessDetailId", data["Id"]);
            component.set("v.longBusinessDescription", data["LongBusinessDescription__c"]);

    });

    $A.enqueueAction(action);
},

editBusinessDetailsHelper : function(component)
{
    component.set("v.editMode", true);
    var longDescription = component.get("v.longBusinessDescription");

    component.set("v.counter", longDescription.length);

},

saveBusinessDetailsHelper : function(component)
{
    component.find("editForm").submit();

    component.set("v.editMode", false);
},

cancelBusinessDetailsHelper : function(component)
{
    component.set("v.editMode", false);
}

With the way the component is setup I get an ID from an outside apex class. I set the longBusinessDescription to the LongBusinessDescription__c field. If I use this attribute then the attribute does not update when my lightning:inputField is updated, the two way binding seems to not be working?

For example: LongBusinessDescription__c = "Initial Value"

when I load the page the lightning:inputField will display "Initial Value".

When I hit the edit button the lightning:inputField will display whatever value is in longBusinessDescription which happens to be "Initial Value".

After I edit the desciption to "Initial Value + New Value" and hit save, the database will update but longBusinessDescription will not. This means that if I try to edit the page before refreshing it will display the old "Initial Value."

Finally, what this all means is that if I try to create a keyup event to listen for any key presses in the lightning:inputField the aura attribute does not update, which means I have no way of checking the value of the lightning:inputField on a key press.

Answer 1

Your question seems to have an unnecessary amount of detail. See if this solves your problem:

COMPONENT:

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName">

    <aura:attribute name="characterCount" type="Integer"/>

    <lightning:recordEditForm aura:id="editForm" recordId="{!v.recordId}" objectApiName="{!v.sObjectName}">
        <lightning:inputField aura:id="longBusinessDescription" fieldName="Name" value="Prepopulate here" onchange="{!c.validateLength}"/>
        <div>
            # of characters entered = {!v.characterCount}
        </div>
    </lightning:recordEditForm>

</aura:component>

CONTROLLER JS:

({
    validateLength : function(component, event, helper) {
        var longBusinessDescription = component.find("longBusinessDescription").get("v.value");
        var characterCount = longBusinessDescription.length;
        component.set("v.characterCount", characterCount);
        if(characterCount > 100)
            alert('Too many characters entered!');
    }
})

In short: lightning:inputField doesn't support keyup event (yet), but there is onchange as mentioned here. Plus, if you would like to get the value of any lightning element that is assigned an aura:id (and supports the value param), you need to do: component.find("myAuraIdHere").get("v.value")