The following section explains the steps required to create the MaskedTextBox component and also it demonstrates the basic usage of the MaskedTextBox.
The following list of dependencies are required to use the MaskedTextBox component in your application.
|-- @syncfusion/ej2-angular-inputs
|-- @syncfusion/ej2-angular-base
|-- @syncfusion/ej2-angular-popups
|-- @syncfusion/ej2-angular-buttons
|-- @syncfusion/ej2-angular-splitbuttons
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-splitbuttons
Angular provides the easiest way to set angular CLI projects using Angular CLI
tool.
Install the CLI application globally to your machine.
npm install -g @angular/cli
ng new syncfusion-angular-maskedtextbox
By default, it install the CSS style base application. To setup with SCSS, pass —style=scss argument on create project.
Example code snippet.
ng new syncfusion-angular-maskedtextbox --style=scss
Navigate to the created project folder.
cd syncfusion-angular-maskedtextbox
All the available Essential JS 2 packages are published in npmjs.com
registry.
To install MaskedTextBox component, use the following command.
npm install @syncfusion/ej2-angular-inputs --save
(or)
npm i @syncfusion/ej2-angular-inputs --save
The —save will instruct NPM to include the MaskedTextBox package inside of the dependencies section of the
package.json
.
Import MaskedTextBox module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-inputs
.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// imports the MaskedTextBoxModule for the MaskedTextBox component
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { AppComponent } from './app.component';
@NgModule({
// declaration of ej2-angular-inputs module into NgModule
imports: [ BrowserModule, MaskedTextBoxModule ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
The following CSS files are available in ../node_modules/@syncfusion
package folder.
This can be referenced in [src/styles.css] using following code.
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
Modify the template in [src/app/app.component.ts] file to render the MaskedTextBox component.
Add the Angular MaskedTextBox by using <ejs-maskedtextbox>
selector in template
section of the app.component.ts file..
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<ejs-maskedtextbox></ejs-maskedtextbox>`
})
export class AppComponent { }
Note: If you want to refer the combined component styles, please make use of our CRG
(Custom Resource Generator) in your application.
You can set the mask to the MaskedTextBox to validate the user input by using the mask
property.
For more information about the usage of mask and configuration, refer to this link.
The following example demonstrates the usage of mask element 0
that allows any single digit from 0
to 9
.
import { Component} from '@angular/core';
@Component({
selector: 'app-root',
// sets mask format to the MaskedTextBox
template: `
<ejs-maskedtextbox mask='000-000-0000'></ejs-maskedtextbox>
`
})
export class AppComponent {
constructor() {
}
}
After completing the configuration required to render a basic MaskedTextBox, run the following command to display the output in your default browser.
ng serve
The following example illustrates the output in your browser.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
// sets mask format to the MaskedTextBox
template: `<label class='label'>Enter the mobile number</label>`+
`<ejs-maskedtextbox mask='000-000-0000'></ejs-maskedtextbox>`
})
export class AppComponent {
constructor() {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { FormsModule } from '@angular/forms';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, MaskedTextBoxModule, FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Angular MaskedTextBox</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Angular MaskedTextBox Component" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<!-- Here we have used CDN links for our preview purpose -->
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-angular-inputs/styles/material.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='ang_container'>
<div class='wrap'>
<app-root>
<div id='loader'>LOADING....</div>
</app-root>
</div>
</div>
</body>
<style>
.e-mask.e-control-wrapper {
margin-bottom: 20px;
}
label.e-error {
margin-top: -42px;
}
</style>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 0 auto;
width: 240px;
}
.label {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
font-size: 14px;
}
In MaskedTextBox, the value
property supports two-way binding functionality.
The following example demonstrates two-way binding functionality with the MaskedTextBox and HTML input element.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
// input element for checking the two-way binding support using value property
template: `
<div class='e-input-group' style='margin-bottom:30px'>
<input class='e-input' type='text' [(ngModel)]='value' placeholder='Mobile Number' />
</div>
<ejs-maskedtextbox mask='000-000-0000' [(value)]='value'></ejs-maskedtextbox>
`
})
export class AppComponent {
constructor() {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { FormsModule } from '@angular/forms';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, MaskedTextBoxModule, FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Angular MaskedTextBox</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Angular MaskedTextBox Component" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<!-- Here we have used CDN links for our preview purpose -->
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-angular-inputs/styles/material.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='ang_container'>
<div class='wrap'>
<app-root>
<div id='loader'>LOADING....</div>
</app-root>
</div>
</div>
</body>
<style>
.e-mask.e-control-wrapper {
margin-bottom: 20px;
}
label.e-error {
margin-top: -42px;
}
</style>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 0 auto;
width: 240px;
}
.label {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
font-size: 14px;
}
MaskedTextBox is a form component and validation is playing vital role in forms to get the valid data.
Here to showcase the MaskedTextBox with form validations we have used the reactive form.
For more details about Reactive Forms refer: https://angular.io/guide/reactive-forms
.
ReactiveFormsModule
from the @angular/forms
package and add it to your NgModule’s imports array.
In addition to this, FormGroup
, FormControl
should be imported to the app component.FormGroup
is used to declare formGroupName
for the form. The constructor of this FormGroup
then takes an object,
that can contain sub-form-groups and FormControls
.FormControl
is used to declare formControlName
for form controls.The following example demonstrates how to use the reactive forms.
import { Component, Inject } from '@angular/core';
import {MaskedTextBoxComponent } from '@syncfusion/ej2-angular-inputs';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app/template.html',
})
export class AppComponent {
skillForm: FormGroup;
build: FormBuilder;
constructor(@Inject(FormBuilder) private builder: FormBuilder) {
this.build = builder;
this.createForm();
}
createForm() {
this.skillForm = this.build.group({
mask: ['', Validators.required],
username: ['', Validators.required],
});
}
get username() { return this.skillForm.get('username'); }
get mask() { return this.skillForm.get('mask'); }
onSubmit() {
alert("You have entered the value: " + this.mask.value );
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, JsonpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule,ReactiveFormsModule, HttpModule, JsonpModule, MaskedTextBoxModule, ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);