1

I'm trying to enable a button when a field changes in my lightning component but I keep getting the error [component.find(...).getElement is not a function].

this is my component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes"  
                access="global">
    <div class="slds-form-element">
        <div class="slds-form-element__control">
            <lightning:input aura:id="color" type="color" label="Pick a Color" name="color" value="#EEEEEE" onchange="{! c.colorChanged }"/>
        </div>
    </div>
    <br/>
    <div class="slds-form-element">
        <div class="slds-form-element__control">
            <lightning:button aura:id="colorButton" label="Submit" disabled="true"/>
        </div>
    </div>
</aura:component>

and here is my controller... should be pretty straightforward.

({
    colorChanged: function(component, event, helper){
        var button = component.find('colorButton').getElement();
        button.set('v.disabled', false);
    },

})

any help is highly appreciated

  • you cannot access getElement for components. lightning:button is a component. if there was <button aura:id="colorButton"> then you will be able to do so. Locker service doesnot allow you to access you innerHtml of components. – Manjot Singh Jul 3 '17 at 10:02
2

You won't be able to use getElement() here because you're calling it on a component in another namespace (lightning).

For a component from your namespace, the framework will give you a secureComponent instance, and for other namespaces, you'll get a secureComponentRef one. If you are curious, you can have a look to the implementations in the Aura framework to see which method is available for a secureComponentRef.

I think the easiest way to do what you want to achieve is to use an attribute that you'll pass to the disabled attribute of lightning:button:

Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global">

    <aura:attribute name="buttonDisabled" type="Boolean" default="true"/>

    <div class="slds-form-element">
        <div class="slds-form-element__control">
            <lightning:input aura:id="color" type="color" label="Pick a Color" name="color" value="#EEEEEE" onchange="{! c.colorChanged }"/>
        </div>
    </div>
    <br/>
    <div class="slds-form-element">
        <div class="slds-form-element__control">
            <lightning:button aura:id="colorButton" label="Submit" disabled="{!v.buttonDisabled}"/>
        </div>
    </div>
</aura:component>

JS Controller

({
    colorChanged: function(component, event, helper){
        component.set('v.buttonDisabled', false);
    },  
})

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.