5
<aura:if isTrue="{!v.leadRecord.Company!=null}">
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="text-input-id-1">Company</label>
            <div class="slds-form-element__control">
                <input type="text" aura:id="company" placeholder="" value="{!v.leadRecord.Company}" disabled="true" class="slds-input" />
            </div>
        </div>
        <aura:set attribute="else">
            <lightning:input aura:id="company" label="Company Name" required="true" value="{!v.company}"/>
        </aura:set>
    </aura:if>

JS:

var company = component.find("company").get("v.value");
6
  • 1
    Check for other elements which has aura:id set to company. Oct 13, 2019 at 10:06
  • I don't see anywhere part from the above where I have set aura:id to company. The code works fine when it goes in the else part. However the code breaks in the if part I would like to get the current field value of the company (if not null) and pass it to my Apex controller via JS. Oct 13, 2019 at 10:27
  • Yes what you described is the expected behaviour. You will have to either add a default company or have a null check on company variable
    – Ranga
    Oct 13, 2019 at 11:13
  • @Ranga : I am sorry, Ranga not able to understand what you are trying to say. Let me brief it out what I am looking at here : A Lead may or may not have value in the Company field. If the value is present then the field on the component should be readonly in the component and the current value should be passed to the JS. If the field value is not present then the user will enter the value manually and the value should be passed to the JS. In both these case, I need to get the value and pass it to my Apex Controller for further processing. Oct 13, 2019 at 11:27
  • Oh sorry, didn't see you have two aura:ids set as company I have seen sometimes component.find returns an array instead of single element. May be try if(component.find("company").length > 0 ) {component.find("company")[0].get("v.value") }
    – Ranga
    Oct 13, 2019 at 11:39

2 Answers 2

8

There is a bug because of the way aura:if renders content. From this documentation

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

But, the bug is, if the condition becomes false and true immediately then it creates an array with 1 element as explained in Lightning component.find("aura:id") returns an array consisting of one element.

So, as a work-around you can do following:

var company = component.find("company");
company = Array.isArray(company) ? company[0].get("v.value") : company.get("v.value");

Here, you are checking if its array and getting 1st element else getting the value directly.

2
  • But what if we have multiple elements with the same aura:id? Oct 17, 2019 at 4:49
  • 1
    @itzmukeshy7, Then you should use a loop. In the current scenario we know that its single element. The problem with current scenario is that you may get a single element OR array. If you have multiple elements, there is no problem - just use loop. Oct 17, 2019 at 5:31
0

Instead of using aura:if please use aura:renderIf

This always re-render the inner components. That way, there would be no error.

Thanks

1
  • 1
    This is a workaround in some scenarios where you don't mind the component being instantiated even if it's not supposed to be rendered but aura:renderIf is deprecated and you should use aura:if whenever possible. May 18, 2021 at 12:44

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .