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

Question

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...

Answer 1

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