[SalesForce] Use variable from lightning:recordEditForm in aura:if / ternary statement

I want to conditionally render one of the fields from recordEditForm. I've already done with attributes that are outside of form, but this time I want to bind the directly.

Thinking something like this along the lines:

<aura:attribute name="myBooleanAttribute" type="Boolean" access="private"/>
<lightning:recordEditForm
                onsuccess="{!c.redirect}"
                onsubmit="{!c.showSpinner}"
                onload="{!c.hideSpinner}"
                onerror="{!c.hideSpinner}"
                recordId="{!v.recordId}"
                objectApiName="Opportunity">
                    <lightning:inputField fieldName="SomeBoolean__c" value="{!v.myBooleanAttribute}"/>
                    <lightning:inputField class="{!v.myBooleanAttribute?'':'slds-hide'}" fieldName="Move_in_Date__c"/>
        </lightning:recordEditForm>

However this doesn't seem to bind them both ways…

Best Answer

Here's one way you can achieve it by utilizing onchange event on your boolean input field. The value attribute will not have an effect here, it will just override the value of your input field.

So to get this done, you will need to:

Remove the value attribute
Introduce an onchange and assign an aura:id to the field
Utilize aura:if to re-render other field based on the selection

The component then looks as:

<lightning:inputField aura:id="chkbox" fieldName="SomeBoolean__c" onchange="{!c.onCheckBoxChange}"/>

<aura:if isTrue="{!v.myBooleanAttribute}">
    <lightning:inputField fieldName="Move_in_Date__c" />
</aura:if>

And then in the JS controller, update the attribute's value to be re-rendered

onCheckBoxChange : function(component, event, helper) {

    // will reset the value of the attribute to re-render the input field on component

    component.set("v.myBooleanAttribute", component.find("chkbox").get("v.value"));
},

Related Solutions

[SalesForce] How to submit a lightning:recordEditForm from a button that isn’t nested

You can manually trigger the submit action of lightning:recordEditForm component without having to use <lightning:button type="button"/> which can be found in the new component documentation UI : https://<myDomain>/componentReference/suite.app

Sample code:

<lightning:recordEditForm aura:id="editForm" recordId="0032800001DYoc0" objectApiName="Contact">
      <lightning:messages />
      <lightning:inputField fieldName="FirstName" />
      <lightning:inputField fieldName="LastName" />
      <lightning:inputField fieldName="Email" />
</lightning:recordEditForm>
<lightning:button class="slds-m-top_small" variant="brand" type="button" name="update" label="update" onclick="{!c.update}" />

controller:

update : function(component,event,helper) {
   component.find("editForm").submit();
}

[SalesForce] Is it possible to use lightning:recordEditForm dynamically on different object types with variable objectApiName

So I faced a similar issue, I managed to solve it using aura:if

aura:if doesnt create the inner components unless the condition is true. You can use it to your advantage.

<aura:if isTrue="{!!empty(v.ParentType)}">
<lightning:recordEditForm recordId="{!v.recordId}"  objectApiName="{!v.ParentType}">
</aura:if>

The inner component and its contents are only created and rendered if the value of the isTrue expression evaluates to true. If the value of the isTrue expression changes and evaluates to false, all the components inside the tag are destroyed. The components are created again if the isTrue expression changes again and evaluates to true.

The general guideline is to use because it helps your components load faster initially by deferring the creation and rendering of the enclosed element tree until the condition is fulfilled.

Thus when your component is loaded even before calling init event, lightning:recordEditForm wont render as v.ParentType will be null.

After your init is called and you set the value of v.ParentType then automatically it will start rendering the lightning:recordEditForm. As ParentType is not null, it wont throw an ugly error.

SRC: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_conditional_markup.htm

Best Answer

Related Solutions

[SalesForce] How to submit a lightning:recordEditForm from a button that isn’t nested

[SalesForce] Is it possible to use lightning:recordEditForm dynamically on different object types with variable objectApiName

Related Topic