Pardeep Jain
Pardeep Jain

Reputation: 86730

Disable Confirm Button conditionally in sweetalert

In one of my code I am using javascript sweet alert library:

https://limonte.github.io/sweetalert2/

https://github.com/limonte/sweetalert2

I want to disable Confirm Button conditionally, but not able to find such property in documentation yet.

Have anyone used this?

PS: In documentation I found swal.disableConfirmButton() method but while using the same Angular throws an error

__WEBPACK_IMPORTED_MODULE_7_sweetalert2___default.a.disableConfirmButton is not a function

Upvotes: 1

Views: 8497

Answers (4)

bytes4me
bytes4me

Reputation: 46

swal.getConfirmButton().disabled = true;

and

swal.getConfirmButton().disabled = false;

Upvotes: 0

Tharanga
Tharanga

Reputation: 2767

In Swal2 you can use swal.getConfirmButton() function to get the button element. Then you can do whatever you want with it. For example, if you use JQuery, you can do something like $(swal.getConfirmButton()).prop('disabled', true) easily. You can refer many useful functions here in the documentation.

Upvotes: 0

angelmaria
angelmaria

Reputation: 253

I had same issue where I was importing 'sweetalert2' as :

import swal2 from 'sweetalert2/dist/sweetalert2.js' import 'sweetalert2/dist/sweetalert2.css'.

Adding following code worked for me.

 confirmButtonText: 'Submit Bond',
 showLoaderOnConfirm: true,
 onOpen: function (){
              swal2.disableConfirmButton();
                   },

Also check on https://github.com/sweetalert2/sweetalert2/issues/226 :)

Upvotes: 3

user4799206
user4799206

Reputation:

If I understood your explanation well, you are using Angular, you can assign a variable and change it according to your constraints or cases.

For example,

disableButton: boolean;
.
.
.
constructor(){
this.disableButton = false;
}
updateDisableButton(){
  if(/*case1**/)
    this.disableButton = true;
  else if
  ...
}

in your html

<button [disabled]="disableButton"></button>

Upvotes: 0

Related Questions