This post explains how to disable the lightning button in Lightning component.
Demo:
DisableButtonComponent
DisableButtonComponentController.js
Apex Controller
Result
Demo:
DisableButtonComponent
<aura:component controller="LightningRelatedExamples" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
<aura:attribute name="objAcc" type="Account" default="{'sobjectType':'Account',
'Name': '',
'Phone': '',
'Industry': '',
'Type': ''}"/>
<aura:attribute name="isHide" type="Boolean" default="false" />
<!-- Notification library to show notifications-->
<lightning:notificationsLibrary aura:id="notifLib"/>
<div class="slds-theme_default">
<div class="slds-form-element">
<center>
<label class="slds-form-element__label slds-text-heading_medium slds-m-bottom_medium" for="form-element-01">Create Account Form</label>
</center>
<div class="slds-form-element__control">
<lightning:input name="name" type="text" required="true" label="Account Name" value="{!v.objAcc.Name}" />
<lightning:input name="phone" type="text" label="Phone" value="{!v.objAcc.Phone}" />
<lightning:input name="industry" type="text" label="Industry" value="{!v.objAcc.Industry}" />
<lightning:input name="type" type="text" label="Account Type" value="{!v.objAcc.Type}" /> <br/>
<center>
<lightning:button variant="brand" disabled="{!v.isHide}" label="{!v.isHide == true ? 'Account Created' : 'Create Account'}" onclick="{!c.saveAccount}" />
</center>
</div>
</div>
</div>
</aura:component>
DisableButtonComponentController.js
({
saveAccount : function(component, event, helper) {
var objAccount = component.get("v.objAcc");
var action = component.get('c.insertAccount');
action.setParams({
objAcc:objAccount
});
action.setCallback(this, function(response) {
var state = response.getState();
if(state === "SUCCESS") {
component.find('notifLib').showToast({
"variant": "success",
"title": objAccount.Name,
"message": "The record has created successfully."
});
component.set('v.isHide', true);
}
});
$A.enqueueAction(action);
}
})
Apex Controller
public inherited Sharing class LightningRelatedExamples {
@AuraEnabled
public static void insertAccount(Account objAcc) {
if(objAcc != null) {
try {
insert objAcc;
}
catch(Exception ex) {
throw new AuraHandledException(ex.getMessage());
}
}
}
}
Result
Thank you, this was helpful.
ReplyDelete