[SalesForce] Not able to set value for Lightning:inputField field if it’s manually modified from UI

I am facing issue with Lightning:inputField with lightning:recordEditForm that when I am trying to programatically change the value of any field I am able to do only if user is not modifying that field manully on screen

What I mean is that, lets say I have a form using lightning:recordEditForm with only two fields of account which are Name and Type.
And I want a logic to introduce that, I want to add selected Type as Prefix on the Name field, I have created a on change method and doing it in that, and that is working as expected if user only changing the Type field
BUT if user first edit the Name field then select/change the Type its not.

I also found related question which was marked as answered but that did not helped in my scenario so added this question again
Related question: Spring 18 : Value Attribute in lightning:inputField

Below is the my sample code
CustomRecordEditForm.cmp

<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,force:hasRecordId" access="global">
<aura:attribute name="recordId" type="String"/>
<div class="slds-container-outer">
    <div class="slds-container">
        <lightning:recordEditForm aura:id="recordViewForm" objectApiName="Account" recordId="{!v.recordId}">
            <lightning:messages />
            <lightning:inputField fieldName="Name" aura:id="Name" />
            <lightning:inputField fieldName="Type" aura:id="Type" onchange="{!c.handleTypeChange}"/>
        </lightning:recordEditForm>
    </div>
</div>

CustomRecordEditFormController.js

({
handleTypeChange : function(component, event, helper) {
    var typeValue = component.find("Type").get("v.value");
    var nameValue = component.find("Name").get("v.value");
    if(typeValue != null && typeValue != '' && typeValue != undefined){
        if(nameValue.indexOf(":") > 0){
            nameValue = nameValue.split(':')[1];
        }
        component.find("Name").set("v.value",typeValue+":"+nameValue);
    }
}

})

Thanks in Advance!

Best Answer

I feel like there should be a better way to do this, but if you want to override the user input on a field, you can try destroying it and then re-creating it using an aura:if and then set your value. I've used this method inside a submit function with a preventdefault tag at the top with good success when I want to reset a record creation form, but please note that I haven't thoroughly tested this in an onchange situation.

To try this approach, you would want to re-work your code as follows:

Component:

<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,force:hasRecordId" access="global">
<aura:attribute name="recordId" type="String"/>
<aura:attribute name="renderName" type="Boolean"/>
<div class="slds-container-outer">
    <div class="slds-container">
        <lightning:recordEditForm aura:id="recordViewForm" objectApiName="Account" recordId="{!v.recordId}">
            <lightning:messages />
            <aura:if isTrue="{!v.renderName}">
                <lightning:inputField fieldName="Name" aura:id="Name" />
             </aura:if>
             <lightning:inputField fieldName="Type" aura:id="Type" onchange={!c.handleTypeChange}"/>
        </lightning:recordEditForm>
    </div>
</div>

Controller:

({
handleTypeChange : function(component, event, helper) {
    var typeValue = component.find("Type").get("v.value");
    var nameValue = component.find("Name").get("v.value");
    if(typeValue != null && typeValue != '' && typeValue != undefined){
        if(nameValue.indexOf(":") > 0){
            nameValue = nameValue.split(':')[1];
        }
    component.set("v.renderName", false);
    component.set("v.renderName", true);
    component.find("Name").set("v.value",typeValue+":"+nameValue);
    }
}

Related Solutions

[SalesForce] In not able to set it’s recordId Attribute from client-side controller

There are couple of changes you need to make in order to work it:

use reloadRecord() Method so that force:recordData can understand your assignment.
Use recordUpdated attribute in force:recordData to get notify of change

So your code will look like this

component

<aura:component controller="SampleClass">
    <aura:attribute name="sfEnv" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
    <aura:attribute name="envId" type="String"/>

    <force:recordData aura:id="deleteHandler" 
                      recordId="{!v.envId}" fields="Id" recordUpdated="{!c.recordUpdated}"/>

    <aura:iteration items="{!v.sfEnv}" var="env" > 
        <lightning:button iconName="utility:delete" value="{!env.Id}" 
                          onclick="{!c.handleDeleteRecord}" variant="base"/>
    </aura:iteration>
    {!v.envId}  <!--Id coming here-->
</aura:component>

Js controller

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

        component.find("deleteHandler").deleteRecord($A.getCallback(function(deleteResult) {
            if (deleteResult.state === "SUCCESS" || deleteResult.state === "DRAFT") {
                helper.helperMethod(component);
                alert("Record is deleted.");
            }               
        }));
    },
    handleDeleteRecord: function(component, event, helper) {
        var result = confirm("Want to delete?");
        if (result) {
            component.set("v.envId",event.getSource().get("v.value"));
            component.find("deleteHandler").reloadRecord();
        }
    }
})

helper method (to reload remaining records)

({
    helperMethod : function(component) {
        var action = component.get("c.getAllEnvironments");
        $A.enqueueAction(action);
        action.setCallback(this,function(response){
            if(response.getState() == "SUCCESS"){
                component.set("v.sfEnv",response.getReturnValue());
            }
        });
    }
})

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

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

Best Answer

Related Solutions

[SalesForce] In not able to set it’s recordId Attribute from client-side controller

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

Related Topic