---
title: Masked Input Fields
product: Form Library
description: Make sure respondents correctly enter data by adding input masks for fields that require a certain data format, e.g., a field for a phone number, or an email address. View a free demo example for JavaScript to learn more.
framework: Angular
source: https://surveyjs.io/form-library/examples/masked-input-fields/angular
index: https://surveyjs.io/form-library/examples/overview.md
---

# Masked Input Fields (Angular)

Your form may contain text fields whose values should have a specific format. To ensure that users enter values correctly, you can add input masks to these form fields. This demo shows how to specify different input mask types. Switch between available JavaScript frameworks to view a dedicated demo version of input masking for jQuery, React, Angular, Vue.js, or Vanilla JavaScript.

You can add input masks to [Single-Line Input](https://surveyjs.io/form-library/examples/text-entry-question/) questions and [Multi-Select Matrix](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list) questions with cells of the `"text"` [`cellType`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list#cellType). To configure an input mask, specify the question's [`maskType`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#maskType) and [`maskSettings`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#maskSettings) properties. Supported mask types are listed in the table below. Each mask type has a corresponding class whose properties you can specify in the `maskSettings` object.

| `maskType` | Class |
| ---------- | ----- |
| `"numeric"` | [`InputMaskNumeric`](https://surveyjs.io/form-library/documentation/api-reference/inputmasknumeric) |
| `"currency"` | [`InputMaskCurrency`](https://surveyjs.io/form-library/documentation/api-reference/inputmaskcurrency) |
| `"datetime"` | [`InputMaskDateTime`](https://surveyjs.io/form-library/documentation/api-reference/inputmaskdatetime) |
| `"pattern"` | [`InputMaskPattern`](https://surveyjs.io/form-library/documentation/api-reference/inputmaskpattern) |

## Numeric Input Mask

A numeric input mask allows you to set minimum and maximum limits on a numeric value (the [`min`](/form-library/documentation/inputmasknumeric#min) and [`max`](/form-library/documentation/inputmasknumeric#max) properties), specify value [`precision`](/form-library/documentation/inputmasknumeric#precision) if the value is a fractional number, and define symbols to use as a [`decimalSeparator`](/form-library/documentation/inputmasknumeric#decimalSeparator) and a [`thousandsSeparator`](/form-library/documentation/inputmasknumeric#thousandsSeparator):

```js
const surveyJson = {
  "elements": [{
    "name": "number"
    "type": "text",
    "maskType": "numeric",
    "maskSettings": {
      "min": 0,
      "max": 100,
      "precision": 1,
      "decimalSeparator": ",",
      "thousandsSeparator": "."
    }
  }]
}
```

## Currency Input Mask

A currency input mask provides the same capabilities as a numeric input mask, plus it allows you to add a [`prefix`](/form-library/documentation/inputmaskcurrency#prefix) and/or a [`suffix`](/form-library/documentation/inputmaskcurrency#suffix) to the value:


```js
const surveyJson = {
  "elements": [{
    "name": "currency"
    "type": "text",
    "maskType": "currency",
    "maskSettings": {
      "min": 0,
      "max": 100,
      "precision": 1,
      "prefix": "$",
      "suffix": " USD"
    }
  }]
}
```

## Date and Time Input Mask

A date and time input mask specifies a pattern for a date time value. This pattern can include separator characters and placeholders that designate date and time components (month, day, year, hours, minutes, seconds). Refer to the [`pattern`](/form-library/documentation/inputmaskdatetime#pattern) property description for a full list of supported placeholders. Optionally, you can limit the date range using the [`min`](/form-library/documentation/inputmaskdatetime#min) and [`max`](/form-library/documentation/inputmaskdatetime#max) properties:

```js
const surveyJson = {
  "elements": [{
    "name": "date"
    "type": "text",
    "maskType": "datetime",
    "maskSettings": {
      "pattern": "mm/dd/yyyy",
      "min": "2024-03-01",
      "max": "2024-04-01"
    }
  }]
}
```

## Pattern Input Mask

A pattern input masks allows you to set a custom value format (phone number, email address, credit card number, etc.). Within the [`pattern`](/form-library/documentation/inputmaskpattern#pattern), you can use `9` for a digit, `a` for a letter, `#` for a digit or a letter, and `\` to escape a character:

```js
const surveyJson = {
  "elements": [{
    "name": "phone"
    "type": "text",
    "maskType": "pattern",
    "maskSettings": {
      "pattern": "+9(999)-999-99-99"
    }
  }]
}
```

You can also use the [`maskSettings.patternDefinitions`](/form-library/documentation/api-reference/settings#maskSettings) object in [global settings](/form-library/documentation/api-reference/settings) to define your own placeholder symbols and map them to custom regular expressions.

## Store Masked Value in Survey Results

If you want to save the question value with an applied input mask, enable the question's [`saveMaskedValue`](/form-library/documentation/inputmasknumeric#saveMaskedValue) property within the `maskSettings` object:

```js
const surveyJson = {
  "elements": [{
    "name": "masked-field"
    "type": "text",
    "maskType": "numeric", // or "currency" | "datetime" | "pattern"
    "maskSettings": {
      // ...
      "saveMaskedValue": true
    }
  }]
}
```

## Files

### `src/app/components/json.ts`

```ts
export const json = {
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "panel",
          "name": "panel1",
          "elements": [
            {
              "type": "text",
              "name": "date",
              "title": "Date and time:",
              "maskType": "datetime",
              "maskSettings": {
                "pattern": "mm/dd/yyyy HH:MM"
              }
            },
            {
              "type": "text",
              "name": "currency",
              "startWithNewLine": false,
              "title": "Currency:",
              "maskType": "currency",
              "maskSettings": {
                "prefix": "$"
              }
            },
            {
              "type": "text",
              "name": "decimal",
              "title": "Decimal:",
              "maskType": "numeric",
              "maskSettings": {
                "precision": 1
              }
            },
            {
              "type": "text",
              "name": "phone",
              "startWithNewLine": false,
              "title": "Phone:",
              "maskType": "pattern",
              "maskSettings": {
                "pattern": "+9(999)-999-99-99"
              }
            },
            {
              "type": "text",
              "name": "creditcard",
              "title": "Credit card number:",
              "maskType": "pattern",
              "maskSettings": {
                "pattern": "9999 9999 9999 9999"
              }
            }
          ]
        }
      ]
    }
  ],
  "widthMode": "static",
  "width": "750px"
};
```

### `src/app/components/survey.component.css`

```css
/* You can add your custom CSS here. */
```

### `src/app/components/survey.component.html`

```html
<survey [model]="model" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; height:100%"></survey>
```

### `src/app/components/survey.component.ts`

```ts
import { Component, OnInit } from "@angular/core";
import { Model } from "survey-core";
import { json } from "./json";
import "./survey.component.css";
import "survey-core/survey-core.min.css";

@Component({
    // tslint:disable-next-line:component-selector
    selector: "component-survey",
    templateUrl: "./survey.component.html",
    styleUrls: ["./survey.component.css"]
})
export class SurveyComponent implements OnInit {
    model: Model;
    ngOnInit() {
        const survey = new Model(json);
        survey.onComplete.add((sender, options) => {
            console.log(JSON.stringify(sender.data, null, 3));
        });
        this.model = survey;
    }
}
```

### `src/app/components/theme.ts`

```ts
export const themeJson = {};
```

### `src/app/app.component.css`

```css

```

### `src/app/app.component.html`

```html
<component-survey></component-survey>
```

### `src/app/app.component.ts`

```ts
import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    title = "CodeSandbox";
}
```

### `src/app/app.module.ts`

```ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { SurveyModule } from "survey-angular-ui";
import { SurveyComponent } from "./components/survey.component";

@NgModule({
    declarations: [AppComponent, SurveyComponent],
    imports: [BrowserModule, SurveyModule],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
```

### `src/environments/environment.prod.ts`

```ts
export const environment = {
    production: true
};
```

### `src/environments/environment.ts`

```ts
// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.

export const environment = {
    production: false
};
```

### `src/index.html`

```html
<app-root></app-root>
```

### `src/main.ts`

```ts
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch(err => console.log(err));
```

### `src/polyfills.ts`

```ts
/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import "core-js/proposals/reflect-metadata";

/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
// import 'web-animations-js';  // Run `npm install web-animations-js`.

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import "zone.js/dist/zone"; // Included with Angular CLI.

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
```

### `src/styles.css`

```css
/* You can add your custom CSS here. */
```

### `src/typings.d.ts`

```ts
/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
    id: string;
}
```

### `.angular-cli.json`

```json
{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [ "assets", "favicon.ico" ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "prefix": "app",
      "styles": [ "styles.css" ],
      "scripts": [ ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]
}
```

### `_tsconfig.json`

```json
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "resolveJsonModule": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}
```

### `package.json`

```json
{
  "name": "surveyjs-angular",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "14.1.1",
    "@angular/cdk": "14.1.1",
    "@angular/common": "14.1.1",
    "@angular/compiler": "14.1.1",
    "@angular/core": "14.1.1",
    "@angular/forms": "14.1.1",
    "@angular/platform-browser": "14.1.1",
    "@angular/platform-browser-dynamic": "14.1.1",
    "@angular/router": "14.1.1",
    "core-js": "3.6.4",
    "rxjs": "6.5.4",
    "survey-core": "latest",
    "survey-angular-ui": "latest",
    "tslib": "1.13.0",
    "zone.js": "0.11.7"
  },
  "devDependencies": {
    "@angular/cli": "1.6.6",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/core-js": "0.9.46",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "3.9.7"
  },
  "keywords": [ "angular", "surveyjs" ],
  "description": "SurveyJS-Angular example project"
}
```

## Other Frameworks

- [React](https://surveyjs.io/form-library/examples/masked-input-fields/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/masked-input-fields/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/masked-input-fields/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/masked-input-fields/vanillajs.md)