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!

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

Attribution
Source : Link , Question Author : Basant Kumar verma , Answer Author : Clare

Leave a Comment