This article describes the API migration process of MaskEdit component from Essential JS 1 to Essential JS 2.
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> |
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> |
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; 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; 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; |