Angular

Search results

Getting Started

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

Installation and configuration

To setup basic Angular sample use following commands.

git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install

For more information, refer to Angular sample setup.

Install Syncfusion packages using following command.

npm install @syncfusion/ej2-angular-inputs --save

The above package installs MaskedTextBox dependencies which are required to render the component in the Angular environment.

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs
 */
(function (global) {
System.config({
    paths: {
        'npm:': 'node_modules/',
        "syncfusion:": "node_modules/@syncfusion/",
    },
    map: {

        // Our app is within the app folder
        app: 'app',

        // Angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

        '@syncfusion/ej2-inputs': 'syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js',
        '@syncfusion/ej2-base': 'syncfusion:ej2-base/dist/ej2-base.umd.min.js',
        '@syncfusion/ej2-popups': 'syncfusion:ej2-popups/dist/ej2-popups.umd.min.js',
        '@syncfusion/ej2-buttons': 'syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js',
        '@syncfusion/ej2-splitbuttons': 'syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js',
        '@syncfusion/ej2-angular-inputs': 'syncfusion:ej2-angular-inputs/dist/ej2-angular-inputs.umd.min.js',
        '@syncfusion/ej2-angular-base': 'syncfusion:ej2-angular-base/dist/ej2-angular-base.umd.min.js',
        '@syncfusion/ej2-angular-popups': 'syncfusion:ej2-angular-popups/dist/ej2-angular-popups.umd.min.js',
        '@syncfusion/ej2-angular-buttons': 'syncfusion:ej2-angular-buttons/dist/ej2-angular-buttons.umd.min.js',
        '@syncfusion/ej2-angular-splitbuttons': 'syncfusion:ej2-angular-splitbuttons/dist/ej2-angular-splitbuttons.umd.min.js',

        // Other libraries
        'rxjs':                      'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },

    // Packages tell the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

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 { }

Modify the template in app.component.ts file to render the MaskedTextBox component and also include the component theme from the corresponding base package @syncfusion/ej2-angular-inputs component through styleUrls.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<ejs-maskedtextbox></ejs-maskedtextbox>`,
  // includes the material theme to MaskedTextBox
  styleUrls: ['../../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css']
  encapsulation: ViewEncapsulation.None
})
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 { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'app-container',
    // sets mask format to the MaskedTextBox
    template: `
            <ejs-maskedtextbox mask='000-000-0000'></ejs-maskedtextbox>
            `
})
export class AppComponent {
    constructor() {
    }
}

Run the application

Run the application in the browser using the below command.

npm start

The following example shows the MaskedTextBox component.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.html

index.css

import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'app-container',
    // 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 { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, MaskedTextBoxModule
    ],
    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" />
    <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-container>
                <div id='loader'>LOADING....</div>
            </app-container>
        </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;
}

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.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.html

index.css

import { Component } from '@angular/core';

@Component({
    selector: 'app-container',
    // 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 { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, MaskedTextBoxModule
    ],
    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" />
    <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-container>
                <div id='loader'>LOADING....</div>
            </app-container>
        </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;
}

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.io/guide/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 declare formGroupName for the form. The constructor of this FormGroup then takes an object, that can contain sub-form-groups and FormControls.
The FormControl is used to declare formControlName for form controls.

The following example demonstrates how to use the reactive forms.

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, ViewChild, ViewEncapsulation,OnInit, ElementRef, Inject } from '@angular/core';
import {MaskedTextBoxComponent  } from '@syncfusion/ej2-angular-inputs';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-container',
    templateUrl: './app/template.html',
})
export class AppComponent {
    @ViewChild('ejMaskedTextBox') ejMaskedTextBox: MaskedTextBoxComponent;
    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 { ButtonComponent } from '@syncfusion/ej2-angular-buttons';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule,ReactiveFormsModule, HttpModule, JsonpModule, MaskedTextBoxModule
    ],
    declarations: [AppComponent, ButtonComponent],
    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);

Getting Started

Dependencies

Installation and configuration

Set the mask

Run the application

Two way binding

Reactive Form

See Also