Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Shruti NigamShruti Nigam 

how to show error on lightning:button

Hi all,

I had created ligtning button in uising lightning:button and i want to show error on it.
Anyone know how to do it?

I tried this but it dosen't work 
var op = component.find("button1");
op.set("v.errors", [{message:"Select any one option"}]);

Thanks in advance
Shubham_KumarShubham_Kumar
Hi Shruti

If you want to display an error message you can do it by making an boolean attribute(default is false) true on button click in the javascript controller and set whatever message you want to display in "yourMessage" attribute as i have done in the code below.
  
//add it in the component
<aura:if isTrue="{!v.anyBooleanAttribute}">
        <div>
            <ui:message title="Error" severity="error" closable="false">
               {!v.yourMessage}
            </ui:message></div>
    </aura:if>
  
//javascript Controller
buttonClick:function(component,event,helper){
	
	if(your condition){
	
		component.set("v.anyBooleanAttribute", true);
		component.set("v.yourMessage", "Message to display");
	}
}
Hope this helps. Do let me know if you have any queries.

P.S: Please mark this as solved if this helped you.

Regards
Shubham Kumar
 
Ajay K DubediAjay K Dubedi
Hi Shruti,

You can use the below code.

<<<----Lightning Component----->>>>
  
<aura:component >
    <aura:attribute name="showError" type="boolean" default="false"/>
    <aura:attribute name="toastMessage" type="String" />
    <aura:attribute name="toastIconName" type="String" />
    
    <lightning:button variant="brand" label="Brand action" title="Brand action" onclick="{! c.handleClick }" />
    <aura:if isTrue="{!v.showError}">
                <div class="divclassError" >
                    <div class="slds-notify slds-notify_toast" role="status" aura:id="toast-area">
                        <span class="slds-assistive-text">Error</span>
                        <span class="slds-icon_container slds-icon-utility-Error slds-m-right_small slds-no-flex slds-align-top" >
                            <lightning:icon iconName="{!v.toastIconName}" alternativeText="" size="small" variant="inverse"/>
                        </span>
                        <div class="slds-notify__content">
                            <h2 class="slds-text-heading_small ">{!v.toastMessage} </h2>
                        </div>
                        <div class="slds-notify__close">
                        </div>
                    </div>
                </div>
            </aura:if>
</aura:component>

<<<<---Controller----->>>> 
({
    handleClick : function(c, e, h) {
        c.set("v.toastMessage", "Error");
        c.set("v.toastIconName", "utility:error");
        c.set("v.showError", true);
    }
})
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com