Getting started with Angular Maskedtextbox component
11 Jul 202410 minutes to read
The following section explains the steps required to create the MaskedTextBox component and also it demonstrates the basic usage of the MaskedTextBox.
Dependencies
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
Setup angular environment
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
Create a new application
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
Installing Syncfusion MaskedTextBox Package
Syncfusion packages are distributed in npm as @syncfusion
scoped packages. You can get all the Angular Syncfusion package from npm link.
Currently, Syncfusion provides two types of package structures for Angular components,
- Ivy library distribution package format
- Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.
Ivy library distribution package
Syncfusion Angular packages(>=20.2.36
) has been moved to the Ivy distribution to support the Angular Ivy rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.
Add @syncfusion/ej2-angular-inputs
package to the application.
npm install @syncfusion/ej2-angular-inputs --save
Angular compatibility compiled package(ngcc)
For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion Angular components. To download the ngcc
package use the below.
Add @syncfusion/ej2-angular-inputs@ngcc
package to the application.
npm install @syncfusion/ej2-angular-inputs@ngcc --save
To mention the ngcc package in the package.json
file, add the suffix -ngcc
with the package version as below.
@syncfusion/ej2-angular-inputs:"20.2.38-ngcc"
Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.
Adding CSS reference
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';
Adding MaskedTextBox component
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 { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { Component } from '@angular/core';
@Component({
imports: [
MaskedTextBoxModule
],
standalone: true,
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.
Set the mask
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 { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { Component } from '@angular/core';
@Component({
imports: [
MaskedTextBoxModule
],
standalone: true,
selector: 'app-root',
// sets mask format to the MaskedTextBox
template: `
<ejs-maskedtextbox mask='000-000-0000'></ejs-maskedtextbox>
`
})
export class AppComponent {
constructor() {
}
}
Running the application
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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { FormsModule } from '@angular/forms'
import { Component } from '@angular/core';
@Component({
imports: [
MaskedTextBoxModule, FormsModule
],
standalone: true,
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Two way binding
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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { FormsModule } from '@angular/forms'
import { Component } from '@angular/core';
@Component({
imports: [
MaskedTextBoxModule, FormsModule
],
standalone: true,
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'>
<ejs-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 {
public value: any;
constructor() {
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Reactive form
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.dev/guide/forms/reactive-forms
.
- To use reactive forms, import
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. - The
FormGroup
is used to declareformGroupName
for the form. The constructor of thisFormGroup
then takes an object, that can contain sub-form-groups andFormControls
. - The
FormControl
is used to declareformControlName
for form controls.
The following example demonstrates how to use the reactive forms.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, Inject } from '@angular/core';
import {MaskedTextBoxComponent } from '@syncfusion/ej2-angular-inputs';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
imports: [
FormsModule,ReactiveFormsModule, MaskedTextBoxModule, ButtonModule
],
standalone: true,
selector: 'app-root',
templateUrl: './template.html',
})
export class AppComponent {
skillForm?: FormGroup | any;
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));