4

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!

  • If the Type field is the select box, then you should use "lightning:select". – Banshi Lal Dangi Aug 6 '18 at 9:25
  • Hi @BanshiL.Dangi this issue is with all type fields, see the code spinet I have provided, We are having issue with text fields also – Basant Kumar verma Aug 13 '18 at 10:46
  • I am also seeing this behavior. It seems like a salesforce defect given that it works when the user doesnt manually change the field values. – Phil Rymek Aug 21 '18 at 18:13
  • It is actually/unbelievably by design that it we can't make changes. Please vote for this idea: Remove restriction on programmatically setting lightning-input-fields. – Peter Knolle May 3 '19 at 20:35
2

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);
    }
}
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.