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.