0

So I have this 'Update' button and I only want it to be enabled in my modal only if the user has entered at least one character.

<aura:if isTrue="{!v.displayEditMatrixNoteModal}">
        <div aura:id="editmatrixNote">
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
                aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close" onclick="{! c.doShowHideEditnotes}"
                            alternativeText="close" variant="bare-inverse" class="slds-modal__close" />
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">
                            {!$Label.c.MTX_Edit_Matrix_Note}
                        </h2>
                    </header>
                    <!---Text Area-->
                    <div class="slds-form-element">
                        <!--<div class="slds-text-align_left ">{!$Label.c.MTX_Note}</div>-->
                        <div class="slds-form-element__control">
                            <lightning:input aura:id="editnote" name="Edit Note" maxlength="32000"
                                placeholder="Edit your note" />
                            <aura:if isTrue="{!not(empty(v.inputError))}">
                                {!v.inputError}
                            </aura:if>
                        </div>
                    </div>
                    <footer class="slds-modal__footer">
                        <button class="slds-button slds-button_brand"
                            onclick="{!c.doaddeditnotes}">{!$Label.c.Add}</button>

                        <button class="slds-button slds-button_neutral"
                            onclick="{!c.doShowHideEditnotes}">{!$Label.c.Cancel}</button>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>

Any reccommendations, I feel like this can be done in the .cmp and not the controller...please suggest, thanks

  • 1
    You can call a javascript function on edit of the field that requires at least one character, then you can set an input hidden variable to true or some value. Based on that input hidden variable's value, you will then render the button. I work in classic and havn't moved to LEX yet but I think the logic should certainly lead you in a right direction. – apple123 Apr 9 at 15:03
0

One way to perform the requested function is to create an attribute type text string, then create a lightning input with the value of the previously created attribute

The disabled attribute of the lightning button identifies if the text string is empty

<lightning:input type="text" value="{!v.textTest}"/>
<lightning:button variant="brand" label="test" name="prueba" disabled="{! empty(v.textTest) ? 'true' : '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.