Prevent closing of modal dialog in EJ2 TypeScript Dialog control

8 May 202310 minutes to read

You can prevent closing of modal dialog by setting the beforeClose event argument cancel value to true.
In the following sample, the dialog is closed when you enter the username value with minimum 4 characters. Otherwise, it will not be closed.

import { Dialog } from '@syncfusion/ej2-popups';
import { enableRipple } from '@syncfusion/ej2-base';

// To get the all input fields and its container.
let inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

// Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.
for (let i = 0; i < inputElement.length; i++) {
    inputElement[i].addEventListener("focus", function () {
        let parentElement = this.parentNode;
        if (parentElement.classList.contains('e-input-in-wrap')) {
            parentElement.parentNode.classList.add('e-input-focus');
        } else {
            this.parentNode.classList.add('e-input-focus');
        }
    });
    inputElement[i].addEventListener("blur", function () {
        let parentElement = this.parentNode;
        if (parentElement.classList.contains('e-input-in-wrap')) {
            parentElement.parentNode.classList.remove('e-input-focus');
        } else {
            this.parentNode.classList.remove('e-input-focus');
        }
    });
}

// Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.
var inputIcon = document.querySelectorAll('.e-input-group-icon');
for (let i = 0; i < inputIcon.length; i++) {
    inputIcon[i].addEventListener('mousedown', function () {
        this.classList.add('e-input-btn-ripple');
    });
    inputIcon[i].addEventListener('mouseup', function () {
        let element = this;
        setTimeout(function () {
            element.classList.remove('e-input-btn-ripple');
        }, 500);
    });
}

enableRipple(true);

// Initialize Dialog component
let dialog: Dialog = new Dialog({
    // Enables the header
    header: 'Sign in',
    // Dialog content
    content: document.getElementById("dlgContent"),
    // Enables the footer buttons
    buttons: [{
        // Accessing button component properties by buttonModel property
        buttonModel: {
            //Enables the primary button
            isPrimary: true,
            content: 'Log in',
            cssClass: 'e-primary',
        },
        // Click the footer buttons to hide the Dialog
        click: function () {
            this.hide();
        }
    }],
    // The Dialog shows within the target element
    target: document.getElementById("container"),
    // Dialog width
    width: '300px',
    beforeClose: validation,
    isModal: true,
    beforeOpen: onBeforeopen
});
// Render initialized Dialog
dialog.appendTo('#dialog');

document.getElementById('targetButton').onclick = (): void => {
    dialog.show();
    document.getElementById("textvalue").value = "";
    document.getElementById("textvalue2").value = "";
};

function validation(args) {
    let text = document.getElementById('textvalue');
    let text1 = document.getElementById('textvalue2');
    if (text.value === "" && text1.value === "") {
        args.cancel= true;
        alert("Enter the username and password")
    } else if (text.value === "") {
        args.cancel= true;
        alert("Enter the username")
    } else if (text1.value === "") {
        args.cancel= true;
        alert("Enter the password")
    } else if (text.value.length < 4) {
        args.cancel= true;
        alert("Username must be minimum 4 characters")
    } else {
        args.cancel= false;
        document.getElementById("textvalue").value = "";
        document.getElementById("textvalue2").value = "";
    }
}

function onBeforeopen(): void {
    document.getElementById('dlgContent').style.visibility = 'visible';
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Dialog</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript UI Components" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;" >Open Dialog</button>
        <div id='dialog'></div>
        <div id="dlgContent" style="visibility: hidden" class='wrap'>
            <div id='input-container'>
              <div class='e-float-input'>
                <input id='textvalue' type='text' required/>
                <span class='e-float-line'></span>
                <label class='e-float-text'>Username</label>
              </div>
            </div>
            <div class='form-group'>
                <div class='e-float-input'>
                    <input id='textvalue2' type='Password' required/>
                    <span class='e-float-line'></span>
                    <label class='e-float-text'>Password</label>
                </div>
            </div>
        </div>
    </div>
</body>
</html>