component.find(...).getElement is not a function within 1 component

Question

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

Answer 1

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