Skip to content

Commit c454280

Browse files
author
pipeline
committed
feature(EJ2-4552): masked textbox ng sample
1 parent be380e4 commit c454280

File tree

10 files changed

+280
-0
lines changed

10 files changed

+280
-0
lines changed

‎src/maskedtextbox/custommask-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"common/shared.module":"import { NgModule } from '@angular/core';\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ListViewModule } from '@syncfusion/ej2-ng-lists';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\n\n\n@NgModule({\n imports: [\n ButtonModule,\n ListViewModule,\n DropDownListModule\n ],\n \n exports: [\n ButtonModule,\n ListViewModule,\n DropDownListModule\n ]\n})\nexport class SharedModule { }\n","app.module":"import { CustomMaskedTextboxController } from './custommask.component';\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\nimport { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { MaskedTextBoxModule } from '@syncfusion/ej2-ng-inputs';\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n\n\n\n\n\n@NgModule({\n imports: [MaskedTextBoxModule, SharedModule, FormsModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [CustomMaskedTextboxController],\nbootstrap: [CustomMaskedTextboxController]\n})\nexport class AppModule { }","custommask.component":"import { Component } from '@angular/core';\n\n@Component({\n selector: 'control-content',\n templateUrl: 'custommask.html',\n})\nexport class CustomMaskedTextboxController {\n public customMaskChar: Object = { P: 'P,A,p,a', M: 'M,m'};\n \n}","custommask.html":"<div class=\"control-section\">\n <div class=\"content-wrapper\">\n <div>\n <div class=\"control-label\">Time (ex: 10:00 PM, 10:00 AM)</div>\n <ej-maskedtextbox mask=\"00:00 >PM\" [customCharacters]=\"customMaskChar\" floatLabelType=\"Never\"></ej-maskedtextbox>\n </div>\n <div>\n <div class=\"control-label\">IP Address (ex: 212.212.111.222)</div>\n <ej-maskedtextbox mask=\"[0-2][0-5][0-5].[0-2][0-5][0-5].[0-2][0-5][0-5].[0-2][0-5][0-5]\" floatLabelType=\"Never\"></ej-maskedtextbox>\n </div>\n </div>\n</div>\n<style>\n .content-wrapper {\n width: 30%;\n margin: 0 auto;\n min-width: 185px;\n }\n \n .control-label {\n padding: 24px 0px 10px 0px;\n font-size: 12px;\n }\n</style>","index.html":"<!DOCTYPE html>\n<html>\n \n <head>\n <meta name=\"author\" content=\"Syncfusion\" />\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n </head>\n \n <body>\n <control-content>\n <div id='loader'>Loading...</div>\n </control-content>\n </body>\n \n </html>\n ","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\",\n \"angular:\": \"https://unpkg.com/@angular/\"\n },\n map: {\n main: 'main.ts',\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n\n \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n '@angular/core': 'angular:core/bundles/core.umd.js',\n '@angular/common': 'angular:common/bundles/common.umd.js',\n '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n '@angular/http': 'angular:http/bundles/http.umd.js',\n '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n '@angular/router': 'angular:router/bundles/router.umd.js',\n '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n '@angular/material': 'angular:material/bundles/material.umd.js',\n 'rxjs': 'https://unpkg.com/rxjs'\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}

‎src/maskedtextbox/custommask.component.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'control-content',
5+
templateUrl: 'custommask.html',
6+
})
7+
export class CustomMaskedTextboxController {
8+
public customMaskChar: Object = { P: 'P,A,p,a', M: 'M,m'};
9+
constructor() { }
10+
}

‎src/maskedtextbox/custommask.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<div class="control-section">
2+
<div class="content-wrapper">
3+
<div>
4+
<div class="control-label">Time (ex: 10:00 PM, 10:00 AM)</div>
5+
<ej-maskedtextbox mask="00:00 >PM" [customCharacters]="customMaskChar" floatLabelType="Never"></ej-maskedtextbox>
6+
</div>
7+
<div>
8+
<div class="control-label">IP Address (ex: 212.212.111.222)</div>
9+
<ej-maskedtextbox mask="[0-2][0-5][0-5].[0-2][0-5][0-5].[0-2][0-5][0-5].[0-2][0-5][0-5]" floatLabelType="Never"></ej-maskedtextbox>
10+
</div>
11+
</div>
12+
</div>
13+
<div id="description">
14+
<p>The custom mask can be achieved by the following ways:</p>
15+
<p style="font-weight: 500">Custom characters:</p>
16+
<p>You can form the <b><a href="../documentation/maskedtextbox/api-maskedTextBoxComponent.html#mask-string" target="_blank">mask</a></b> with any non-mask elements (literals), and you can configure the behavior of that non-mask element as mask element
17+
through
18+
<b><a href="../documentation/maskedtextbox/api-maskedTextBoxComponent.html#customcharacters-object" target="_blank">customCharacters</a></b> property.
19+
</p>
20+
<p>In this demo, the “Time” mask '99 : 99 >PM' contains the literals P and M, where it was configured to allow the inputs
21+
as 'P', 'A', 'p', 'a' and 'M', 'm'.</p>
22+
<p style="font-weight: 500">Regular expression:</p>
23+
<p>Alternatively, you can use regular expressions as mask element to validate the input of the particular input place.
24+
</p>
25+
<p>Here, in the “IP Address” example, each character was masked by an regular expression to allow a particular range of
26+
values.
27+
</p>
28+
<p>For more information, you can refer the <b><a href="../documentation/maskedtextbox/mask-configuration.html#custom-characters" target="_blank">Custom characters</a></b> and
29+
<b><a href="../documentation/maskedtextbox/mask-configuration.html#regular-expression" target="_blank">Regular expression</a></b> sections from the documentation.</p>
30+
</div>
31+
<style>
32+
.content-wrapper {
33+
width: 30%;
34+
margin: 0 auto;
35+
min-width: 185px;
36+
}
37+
38+
.control-label {
39+
padding: 24px 0px 10px 0px;
40+
font-size: 12px;
41+
}
42+
</style>

‎src/maskedtextbox/default-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"common/shared.module":"import { NgModule } from '@angular/core';\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ListViewModule } from '@syncfusion/ej2-ng-lists';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\n\n\n@NgModule({\n imports: [\n ButtonModule,\n ListViewModule,\n DropDownListModule\n ],\n \n exports: [\n ButtonModule,\n ListViewModule,\n DropDownListModule\n ]\n})\nexport class SharedModule { }\n","app.module":"import { DefaultMaskedTextboxController } from './default.component';\n\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\nimport { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { MaskedTextBoxModule } from '@syncfusion/ej2-ng-inputs';\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n\n\n\n\n\n@NgModule({\n imports: [MaskedTextBoxModule, SharedModule, FormsModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [DefaultMaskedTextboxController],\nbootstrap: [DefaultMaskedTextboxController]\n})\nexport class AppModule { }","default.component":"import { Component } from '@angular/core';\n\n@Component({\n selector: 'control-content',\n templateUrl: 'default.html',\n})\nexport class DefaultMaskedTextboxController {\n \n}","default.html":"<div class=\"control-section\">\n <div class=\"content-wrapper\">\n <div>\n <div class=\"control-label\">Mobile Number</div>\n <ej-maskedtextbox mask=\"000-000-0000\"></ej-maskedtextbox>\n </div>\n <div>\n <div class=\"control-label\">Country ISO Code</div>\n <ej-maskedtextbox mask=\">LL / LLL\"></ej-maskedtextbox>\n </div>\n <div>\n <div class=\"control-label\">D.O.B</div>\n <ej-maskedtextbox mask=\"00/00/0000\"></ej-maskedtextbox>\n </div>\n <div>\n <div class=\"control-label\">Product Key</div>\n <ej-maskedtextbox mask=\">AAAAA-AAAAA-AAAAA-AAAAA\"></ej-maskedtextbox>\n </div>\n </div>\n</div>\n<style>\n .content-wrapper {\n width: 30%;\n margin: 0 auto;\n min-width: 185px;\n }\n\n .control-label {\n padding: 24px 0px 10px 0px;\n font-size: 12px;\n opacity: 0.54;\n }\n</style>","index.html":"<!DOCTYPE html>\n<html>\n \n <head>\n <meta name=\"author\" content=\"Syncfusion\" />\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n </head>\n \n <body>\n <control-content>\n <div id='loader'>Loading...</div>\n </control-content>\n </body>\n \n </html>\n ","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\",\n \"angular:\": \"https://unpkg.com/@angular/\"\n },\n map: {\n main: 'main.ts',\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n\n \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n '@angular/core': 'angular:core/bundles/core.umd.js',\n '@angular/common': 'angular:common/bundles/common.umd.js',\n '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n '@angular/http': 'angular:http/bundles/http.umd.js',\n '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n '@angular/router': 'angular:router/bundles/router.umd.js',\n '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n '@angular/material': 'angular:material/bundles/material.umd.js',\n 'rxjs': 'https://unpkg.com/rxjs'\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}

‎src/maskedtextbox/default.component.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'control-content',
5+
templateUrl: 'default.html',
6+
})
7+
export class DefaultMaskedTextboxController {
8+
constructor() { }
9+
}

0 commit comments

Comments
 (0)