Ej1 api migration in Angular Maskedtextbox component

4 Apr 20239 minutes to read

This article describes the API migration process of MaskEdit component from Essential JS 1 to Essential JS 2.

Common

Behavior API in Essential JS 1 API in Essential JS 2
Adding custom class Property: cssClass

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="9999" cssClass = "custom" /> 		Property: cssClass

<ejs-maskedtextbox #mask cssClass = "custom" mask='9999'></ejs-maskedtextbox>
Destroy editor Not Applicable Method: destroy

<ejs-maskedtextbox #mask mask="00-000"></ejs-maskedtextbox>
@ViewChild("mask") mask: MaskedTextBoxComponent;
mask.destroy();
Disable the maskedit control Method: disable

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000" value="1234" />
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.disable(); 		Can be achieved using

<ejs-maskedtextbox #mask mask="00-00" value="1234"></ejs-maskedtextbox>
@ViewChild("mask") mask: MaskedTextBoxComponent;
mask.enabled = false;
Enable the maskedit control Method: enable

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000" value="1234" />
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.enable(); 		Can be achieved using

<ejs-maskedtextbox #mask mask="00-00" value="1234"></ejs-maskedtextbox>
@ViewChild("mask") mask: MaskedTextBoxComponent;
mask.enabled=true;
Control state Property: enabled

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="00-000" enabled="false" /> 		Property: enabled

<ejs-maskedtextbox mask='00-000' enabled=false></ejs-maskedtextbox>
Persistence Property: enablePersistence

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000" enablePersistence="true" /> 		Property: enablePersistence

<ejs-maskedtextbox mask='0000' enablePersistence=true></ejs-maskedtextbox>
Triggers when editor is focused in Event: focusIn

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="00-00" (focusIn)="focusIn()"/>

script
focusIn() {} 		Event: focus

<ejs-maskedtextbox mask='0000' (focus) = "onFocus()"></ejs-maskedtextbox>

script
public onFocus(): void {}
Triggers when editor is focused out Event: focusOut

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000" (focusOut)="focusOut()"/>

script
focusOut() {} 		Event blur

<ejs-maskedtextbox mask='0000' (blur) = "onBlur()"></ejs-maskedtextbox>

Script
public onBlur(): void {}
Sets height Property: height

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000" height="30px" /> 		Can be achieved using,

<ejs-maskedtextbox #mask cssClass = "custom" mask='0000'></ejs-maskedtextbox>
Css
.e-maskedtextbox.custom{
height: 30px
}
HTML Attributes Property: htmlAttributes

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000" [htmlAttributes]= "htmlAttr" />

script
constructor() {
this.htmlAttr = {name: "maskedtextbox"};
} 		Can be achieved using,
<ejs-maskedtextbox mask='999-99' value='12345' name="masked" ></ejs-maskedtextbox>
Specifies Input mode Property: inputMode

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000" /> 		Can be achieved using,
<ejs-maskedtextbox mask='999-99' value='12345' type="password" ></ejs-maskedtextbox>
Triggers on key press Event: keyPress

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000" (keyPress)="onKeyPress()"/>

script
onKeyPress() {} 		Can be achieved using
<ejs-maskedtextbox mask='999-99'id="mask" value='12345' placeholder= "Masked TextBox" floatLabelType= 'Always' (created)="onCreate($event)"></ejs-maskedtextbox>
Script
public onCreate() {
document.getElementById("mask").addEventListener('keypress',(event:any)=>{
});
}
Triggers on key up Event: keyUp

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000" (keyUp)="onKeyUp()"/>

script
onKeyUp() {} 		Can be achieved using
<ejs-maskedtextbox mask='999-99'id="mask" value='12345' placeholder= "Masked TextBox" floatLabelType= 'Always' (created)="onCreate($event)"></ejs-maskedtextbox>
Script
public onCreate() {
document.getElementById("mask").addEventListener('keyup',(event:any)=>{
});
}
Triggers on mouse out in maskedit control Event: mouseOut

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000-000" (mouseOut)="onMouseOut()"/>

script
onMouseOut() {} 		Can be achieved using
<ejs-maskedtextbox mask='999-99'id="mask" value='12345' placeholder= "Masked TextBox" floatLabelType= 'Always' (created)="onCreate($event)"></ejs-maskedtextbox>
Script
public onCreate() {
document.getElementById("mask").addEventListener('mouseout',(event:any)=>{
});
}
Triggers when mouse over in maskedit control Event: mouseOver

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="00-00" (mouseOver)="onMouseOver()"/>

script
onMouseOver() {} 		Can be achieved using
<ejs-maskedtextbox mask='999-99'id="mask" value='12345' placeholder= "Masked TextBox" floatLabelType= 'Always' (created)="onCreate($event)"></ejs-maskedtextbox>
Script
public onCreate() {
document.getElementById("mask").addEventListener('mouseover',(event:any)=>{
});
}
Name of maskedit control Property: name

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000" name="pin"/> 		Can be achieved using,
<ejs-maskedtextbox mask='999-99' value='12345' name="masked" ></ejs-maskedtextbox>
Triggers on keydown Event: onKeyDown

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="9999-9999" (onKeyDown)="onKeyDown()"/>

script
onKeyDown() {} 		Can be achieved using
<ejs-maskedtextbox mask='999-99'id="mask" value='12345' placeholder= "Masked TextBox" floatLabelType= 'Always' (created)="onCreate($event)"></ejs-maskedtextbox>
Script
public onCreate() {
document.getElementById("mask").addEventListener('keydown',(event:any)=>{
});
}
Read only Property: readOnly

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="99-999" readOnly="true"/> 		Can be achieved using
<ejs-maskedtextbox #mask width="100px" mask='0000' enabled = false></ejs-maskedtextbox>
CSS
.e-mask{
background-image: none !important;
border-bottom-color: rgba(0, 0, 0, 0.42) !important;
}
Right to left Property: textAlign

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="9999" textAlign="Right"/> 		Property: enableRtl

<ejs-maskedtextbox #mask enableRtl=true mask='9999'></ejs-maskedtextbox>
Sets width Property: width

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000" width="100px"/> 		Property: width

<ejs-maskedtextbox #mask width="100px" mask='0000'></ejs-maskedtextbox>

Mask Configuration

Behavior API in Essential JS 1 API in Essential JS 2
Triggers on value change Event change

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="00-00" (change)="onChange()"/>

script
onChange() {} 		Event: change

<ejs-maskedtextbox mask='00-00' (change) = "onChange()"></ejs-maskedtextbox>

script
public onChange(): void {}
Clears maskedit text/value Method: clear

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000" value="1234"/>
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.clear(); 		Can be achieved using
script
<ejs-maskedtextbox #mask mask="00-00" value="1234"></ejs-maskedtextbox>
@ViewChild("mask") mask: MaskedTextBoxComponent;
mask.value = ""
Triggers on creation Event: create

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="00-00" (create)="onCreate()"/>

script
onCreate() {} 		Event: created

<ejs-maskedtextbox mask='00-00' (created) = "onCreated()"></ejs-maskedtextbox>

script
public onCreated(): void {}
Custom Character Property: customCharacter

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="C-0000" customCharacter="#"/> 		Property: customCharacters

<ejs-maskedtextbox mask='C-0000' [customCharacters]="customCharacters"></ejs-maskedtextbox>

script
public customCharacters: object = {C: '#'};
Triggers when maskedit control is destroyed Event: destroy

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="00-00" (destroy)="onDestroy()"/>

script
onDestroy() {} 		Event: destroyed

<ejs-maskedtextbox mask='00-00' (destroyed) = "onDestroyed()"></ejs-maskedtextbox>

script
public onDestroyed(): void {}
Placeholder float type Not Applicable Property: floatLabelType

<ejs-maskedtextbox mask='9,999' placeholder="Enter value" floatLabelType="Auto"></ejs-maskedtextbox>
Gets pure value of maskedit control Method: get_StrippedValue

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000" value="123"/>

script
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.get_StrippedValue(); 		Can be achieved using
script
<ejs-maskedtextbox #mask mask="00-00" value="1234"></ejs-maskedtextbox>
@ViewChild("mask") mask: MaskedTextBoxComponent;
alert(mask.value);
Get whole maskedit value Method: get_UnstrippedValue

script
<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="00-00" value="1234"/>
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.get_UnstrippedValue(); 		Method: getMaskedValue

script
<ejs-maskedtextbox #mask mask="00-00" value="1234"></ejs-maskedtextbox>
@ViewChild("mask") mask: MaskedTextBoxComponent;
mask.getMaskedValue();
Hides prompt character on focus out Property: hidePromptOnLeave

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="aaaa" hidePromptOnLeave="true"/> 		Can be achieved using
<ejs-maskedtextbox mask='999-99' #mask id="mask1" value='12345" focus="onFocus" placeholder= "Masked TextBox" floatLabelType= 'Always' (created)="onCreate($event)"></ejs-maskedtextbox>
Script
@ViewChild("mask") mask: MaskedTextBoxComponent;
public onCreate(){
document.getElementById("mask1").addEventListener('blur',(event:any)=>{
mask.promptChar= " "
});
}
public onFocus(){
mask.promptChar="_"
}
Mask format Property: maskFormat

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="99,999"/> 		Property: mask

<ejs-maskedtextbox mask='99,999'></ejs-maskedtextbox>
Prompt character Not Applicable Property: promptChar

<ejs-maskedtextbox mask='0000' promptChar="#"></ejs-maskedtextbox>
Clear Button Not Applicable Property: showClearButton

<ejs-maskedtextbox mask='aaaa' showClearButton=true></ejs-maskedtextbox>
Prompt character display Property: showPromptChar

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="$99-999" showPromptChar="false"/> 		Can be achieved using
<ejs-maskedtextbox mask='0000' promptChar=" "></ejs-maskedtextbox>
Show rounded corner Property: showRoundedCorner

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000" showRoundedCorner="true"/> 		Can be achieved using
<ejs-maskedtextbox mask="000-000-000" id="mask1" floatLabelType="Always" cssClass="e-style"></ejs-maskedtextbox>
Css
#mask1{
border: 2px solid grey;
padding: 7px;
border-radius: 10px;
}
.e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::before ,.e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::after
{
background: none ;
}
Value of maskedit control Property: value

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000" value="1234"/> 		Property: value

<ejs-maskedtextbox mask='0000' value="1234"></ejs-maskedtextbox>
Displays hint on maskedit control Property: watermarkText

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="9999" watermarkText="Enter value"/> 		Property: placeholder

<ejs-maskedtextbox mask='9999' placeholder="Enter value"></ejs-maskedtextbox>

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Displays error until correct value is entered Property: showError

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="99-999" showError="true"/> 		MaskedTextBox by default shows error until the correct value is entered
script
<ejs-maskedtextbox #mask mask="00-00" value="1234"></ejs-maskedtextbox>
Validation message Property: validationMessage

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="0000"/>

script
constructor() {
this.validationRules = {required: true};
this.validationMessage = {required: "Required value"}
} 		Can be achieved using Form Validation
<form #formElement class="form-horizontal">
<ejs-maskedtextbox id="masktextbox" #mask="" mask='000-000-0000' name="mask_value" placeholder= 'Mobile Number' floatLabelType= 'Always'>
</ejs-maskedtextbox>
</form>
Script
@ViewChild('formElement') element;
@ViewChild('mask') mask: MaskedTextBoxComponent;</br>public formObject: FormValidator;
let options: FormValidatorModel = {
rules: {
'mask_value': { required: [true, 'Enter valid mobile number'] },
}
}
this.formObject = new FormValidator(this.element.nativeElement, options);
let customPlace: (element: HTMLElement, error: HTMLElement) => void = (element: HTMLElement, error: HTMLElement) => {
document.querySelector(".form-group").appendChild(error);
};
this.formObject.customPlacement = customPlace;
}
Validation Rules Property: validationRules

<input ej-maskedit inputMode="ej.InputMode.Text" maskFormat="00-00"/>

script
constructor() {
this.validationRules = {required: true};
} 		Can be achieved using Form Validation
<form #formElement class="form-horizontal">
<ejs-maskedtextbox id="masktextbox" #mask="" mask='000-000-0000' name="mask_value" placeholder= 'Mobile Number' floatLabelType= 'Always'>
</ejs-maskedtextbox>
</form>
Script
@ViewChild('formElement') element;
@ViewChild('mask') mask: MaskedTextBoxComponent;</br>public formObject: FormValidator;
let options: FormValidatorModel = {
rules: {
'mask_value': { required: [true] },
}
}
this.formObject = new FormValidator(this.element.nativeElement, options);
let customPlace: (element: HTMLElement, error: HTMLElement) => void = (element: HTMLElement, error: HTMLElement) => {
document.querySelector(".form-group").appendChild(error);
};
this.formObject.customPlacement = customPlace;