0

I need to enable the text boxes based on the value selected in combobox -

Below Picture - enter image description here

Based on the Combobox changed I am trying to enable the corresponding input boxes, which is not working with component.find

Below Code --

            <aura:iteration items="{!v.contributionList}" 
            var="contriWrap">
                <tr>
                    <td><div class="slds-text-title slds- 
                      text-color_default slds-truncate"> 
                           {!contriWrap.classification}</div></td>
                    <td>
                        <!-- <lightning:select value="{!contriWrap.contributionType}" >   
                                         <option value="Fixed Dollars">Fixed Dollars</option>
                                         <option value="Percent">Percent</option>
                                        </lightning:select>-->
                        <lightning:combobox id="{!contriWrap.contribution}"
                                            value="{!contriWrap.contributionType}"
                                            onchange="{!c.handleChange}"
                                            options="{!v.contributionType}"
                                            placeholder="Not Applicable"
                                            variant="label-hidden"
                                            />
                    </td>

                    <td>
                        <lightning:input aura:id="{!contriWrap.contribution}" label="For Employee" type="currency" variant="label-hidden" placeholder="0" value="{!contriWrap.contributionEmployee}" disabled="true"/><!--<span class="slds-form-element__addon" id="fixed-text-addon-post">USD</span>-->
                    </td>
                    <td>
                        <lightning:input aura:id="{!contriWrap.contribution}" label="For Dependent" type="currency" variant="label-hidden" placeholder="0" value="{!contriWrap.contributionDependent}" disabled="true"/><!--<span class="slds-form-element__addon" id="fixed-text-addon-post">%</span>-->
                    </td>

                </tr>
            </aura:iteration>



handleChange: function (component, event) {
    // Get the string of the "value" attribute on the selected option
    var selectedOptionValue = event.getParam("value");
    var selectedId = event.getSource().get("v.id");
    console.log('Hi selectedOptionValue',selectedOptionValue);
    console.log('selectedId-->'+selectedId);
    var cmpTarget = component.find(selectedId);
    console.log(' cmpTarget'+cmpTarget);
    component.find(selectedId).set("v.disabled",false);
    console.log('after setting value');
    //component.set("v.seletedContributionType",selectedOptionValue);
},
Improve this question
8
  • You need aura:id to be able to use it with component.find(). In its current form, you have an id defined in your component. – Jayant Das Aug 15 '19 at 13:24
  • It's aura:id on the lightning:input – mvk1991 Aug 15 '19 at 13:24
  • Seems you are trying to find the id of the combo box on the handleChange event. In that case the id should be defined as aura:id on the combo box. Which component's id are you trying to retrieve? – Jayant Das Aug 15 '19 at 13:26
  • I am trying to search lightning:input ..combobox id is used just as a search query. I want to disabled=false on lightning:input whenever it's combobox changes. – mvk1991 Aug 15 '19 at 13:27
  • You seem to have two component defined with same id. What is the error/issue you are getting? Adding those details will help. – Jayant Das Aug 15 '19 at 13:29
2

aura:id cannot be dynamically created using {!} binding. It has to be static.

aura:id doesn't support expressions. You can only assign literal string values to aura:id.

So you can put everything between tr in separate child component and implement logic:

<aura:component >
    <aura:attribute name="contriWrap" type="Map" />
    <td>
        <div class="slds-text-title slds- 
                    text-color_default slds-truncate"> {!v.contriWrap.classification}</div>
    </td>
    <td>
        <!-- <lightning:select value="{!v.contriWrap.contributionType}" >   
                                          <option value="Fixed Dollars">Fixed Dollars</option>
                                          <option value="Percent">Percent</option>
                                         </lightning:select>-->
        <lightning:combobox id="{!v.contriWrap.contribution}"
                            value="{!v.contriWrap.contributionType}"
                            onchange="{!c.handleChange}"
                            options="{!v.contributionType}"
                            placeholder="Not Applicable"
                            variant="label-hidden" />
    </td>
    <td>
        <lightning:input aura:id="findable_id1" label="For Employee" type="currency"
                         variant="label-hidden" placeholder="0"
                         value="{!v.contriWrap.contributionEmployee}" disabled="true" />
        <!--<span class="slds-form-element__addon" id="fixed-text-addon-post">USD</span>-->
    </td>
    <td>
        <lightning:input aura:id="findable_id2" label="For Dependent" type="currency"
                         variant="label-hidden" placeholder="0"
                         value="{!v.contriWrap.contributionDependent}" disabled="true" />
        <!--<span class="slds-form-element__addon" id="fixed-text-addon-post">%</span>-->
    </td>
</aura:component>

and in parent:

<aura:iteration items="{!v.contributionList}"
                var="contriWrap">
    <tr>
        <c:childTdComp contriWrap={!contriWrap} />
    </tr>
</aura:iteration>

Also implement handleChange in child component.

Improve this answer
1
  • Does this answer solve the problem? Can you kindly mark it solved, if solved? – salesforce-sas Aug 24 '19 at 14:07

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.