How to read the value of the ui:inputText in the client side controller?

Question

I have a <ui:inputText> in my component. when I try to access the value of the textbox in the client side controller, I get undefined. Should the textbox be within a form?

Component:

<div class="slds-form-element">
<div class="slds-form-element__control">
<label class="slds-form-element__label" for="comments">{!$Label.c.Comments}</label>
<div class="slds-form-element__control">
<ui:inputtextarea aura:id="comments"  class="slds-input" rows="3" value="{!v.comments}" updateOn="keyup"/>
</div>
</div>
</div>
<button class="slds-button slds-button--neutral slds-button--brand" onclick="{!c.buttonClicked}">Save</button>

Controller:

buttonClicked:function(component, event, helper) {


    var commentsControl = component.find("comments");
    console.log(component.find("comments"));
    console.log("event:"+commentsControl.get("v.value")) ;


}

Answer 1

Since you bound the value to "comments":

value="{!v.comments}"

You should have an attribute by the same name:

<aura:attribute name="comments" type="String" />

And in your controller, you can access it directly:

var comments = component.get("v.comments");
console.log("comments: " + comments);

Answer 2

I think you forgot to add the attribute named comments of type String:

Component:

<aura:attribute name="comments" type="String" default="" />

<div class="slds-form-element">
    <div class="slds-form-element__control">
        <label class="slds-form-element__label" for="comments">{!$Label.c.Comments}</label>
        <div class="slds-form-element__control">
            <ui:inputtextarea aura:id="comments"  class="slds-input" rows="3" value="{!v.comments}" updateOn="keyup"/>
        </div>
     </div>
</div>

<button class="slds-button slds-button--neutral slds-button--brand" onclick="{!c.buttonClicked}">Save</button>

Controller:

buttonClicked:function(component, event, helper) {              
    var commentsControl = component.find("comments");
    console.log(component.find("comments"));
    console.log("event:"+commentsControl.get("v.value")) ;          
}