Search code examples
aureliamaterializesweetalert2

How to combine aurelia-materialize-bridge and sweetalert2


I want to put a form in a popup.
I've found a solution but I'm looking for something cleaner.

I didn't find a way to poping-up an existing tag with swal.
So I created an hidden form in my template :

<div id="myHiddenForm"><form role="form">
    <md-input class="email" md-type="email" md-label="Email" md-validate="true" 
        md-validate-error="invalid email">
        <i md-prefix class="material-icons">account_circle</i>
    </md-input>
    <button type="submit" md-button>
        <i class="left material-icons">done</i>Submit
    </button>
</form></div>

Then I created the popup with it's innerHTML.

swal({
  html: document.getElementById('myHiddenForm').innerHTML,
  showConfirmButton: false,
}).catch(swal.noop);

Then I can attach a callback to the submit button and this works finally.

Obviously, I can't use md-value.bind because the displayed form is a copy of the original.
I can access the input's value, using document.querySelectorAll('#myHiddenForm .email input')[0].value but I'm wondering if there's a better way to do this ?

Maybe there's a nice approach to combine aurelia-materialize-bridge and sweetalert2.

I know there's a modal component but it's not capable of keeping the focus inside the modal popup ; plus I already use swal2 everywhere else in this webapp because, you know, it is so sweet.


Solution

  • After a lot of tests and the full reading of the sweetalert2 documentation, I found the correct way to handle this. We simply need to move the <form> node.

    swal({
      html: '<span></span>'
      , showCloseButton: true
      , showConfirmButton: false
      , onBeforeOpen: dom => swal.getContent()
            .appendChild(document.querySelectorAll('#myHiddenForm form'))
      , onClose: dom => document.getElementById('myHiddenForm')
            .appendChild(swal.getContent().querySelectorAll('form'))
    }).catch(swal.noop);
    

    It's perfect to use with aurelia because it preserve everything (monitors, events, validation...).
    We don't even need to manually bind the submit button like I did, We can use aurelia's usual way.

    Conclusion: RTFM !