Getting Started

23 Oct 20173 minutes to read

Using the following steps, you can create a Typescript MaskEdit component.

Creating an MaskEdit in TypeScript

You can create a Typescript application with the help of the given Typescript Getting Started Documentation.

Within an index.html file and add the scripts references in the order mentioned in the following code example.

<!DOCTYPE html>
<html>
<head>
<title>TypeScript Application</title>
<link href="http://cdn.syncfusion.com/**24.2.3**/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="http://cdn.syncfusion.com/**24.2.3**/js/web/ej.web.all.min.js" type="text/javascript"></script>

</head>
<body>
<!--Add MaskEdit sample  here-->
</body>
</html>

The can be created from a input element with the HTML id attribute and pre-defined options set to it.

HTML

<input id="maskEdit" type="text" />
<script src="app.js"></script>

Create app.ts file and use the below content

/// <reference path="jquery.d.ts" />  
/// <reference path="ej.web.all.d.ts" />

module EditorComponent {
    var mask = new ej.MaskEdit($("#maskEdit"), {
            name: "mask",
            value: "4242422424",
            maskFormat: "99 999-99999",
            width: "100%"
        })
}

Now build your application, so that the app.ts file will compiled and automatically generated the app.js file which is added to your project (User have nothing to do with this file). Now, whatever code changes that you make in app.ts file will be reflected in app.js file by compiling build the application.

Execution of above code will render the following output.

Error Visibility

The MaskEdit has an option that shows the error value with red colored text. It is used to validate the Mask Edit value. You can set the showError property as “true” to enable this option.

/// <reference path="jquery.d.ts" />  
/// <reference path="ej.web.all.d.ts" />

module EditorComponent {
  var mask = new ej.MaskEdit($("#maskEdit"), {
            name: "mask",
            value: "123456",
            maskFormat: "99 999-99999",
            width: "100%",
            showError: true
        })
}

Execution of above code will render the following output

CustomCharacter

The MaskEdit allows you to use the custom character option. The specified character is only allowed to enter in the Mask Edit Textbox by using the customCharacter property.

/// <reference path="jquery.d.ts" />  
/// <reference path="ej.web.all.d.ts" />

var mask = new ej.MaskEdit($("#maskEdit"), {
    name: "mask",
    value: "4242424",
    maskFormat: "9C 9C9-9C",
    width: "100%",
    customCharacter: "$"
})