---
title: Numeric Entry
product: Form Library
description: Make sure your respondents use numeric data to answer questions that require such a data format, for example, to specify their age, weight, or height. View a free demo for JavaScript.
framework: Angular
source: https://surveyjs.io/form-library/examples/numeric-entry-question/angular
index: https://surveyjs.io/form-library/examples/overview.md
---

# Numeric Entry (Angular)

A numeric entry type question is a variation of a text entry question that accepts only numbers. This example demonstrates different types of numeric data entry questions supported by SurveyJS Form Library. Switch between React, Vue, Vanilla JavaScript, jQuery, and Angular to view an example for your JavaScript framework.

## Create a Numeric Entry Question

To create a numeric entry form field, define an object with the `type` property set to `"text"` and add it to the [`elements`](https://surveyjs.io/form-library/documentation/pagemodel#elements) array. Within this object, specify the question's [`title`](https://surveyjs.io/form-library/documentation/questiontextmodel#title) and a unique [`name`](https://surveyjs.io/form-library/documentation/questiontextmodel#name) that identifies the numeric input question. Optionally, you can specify a [`description`](https://surveyjs.io/form-library/documentation/questiontextmodel#description) to place under the `title` and a [`placeholder`](https://surveyjs.io/form-library/documentation/questiontextmodel#placeholder) to show within the number input box.

## Specify Input Type

If a question requires specific numerical input, use the [`inputType`](https://surveyjs.io/form-library/documentation/questiontextmodel#inputType) property to specify the input type. An `inputType` value is passed on to the [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types) attribute of the underlying `<input>` HTML element. This example demonstrates the `"number"`, `"range"`, and `"tel"` input types.

> For use cases that require a range input, consider using the more flexible [Slider](/form-library/examples/single-value-slider-input/) question type instead. It offers such features as a customizable scale, auto-generated or custom labels, range selection, and thumb tooltips.

In addition, you can specify the [`autocomplete`](https://surveyjs.io/form-library/documentation/questiontextmodel#autocomplete) property to let the browser suggest autofill values. For example, the "Phone number" form field in this demo can be populated automatically if your browser contains autofill phone numbers.

## Validate Numeric Values

If you need to ensure that respondents fill out all required form fields and the format of values is correct, enable data validation. This example demonstrates the following validation types and describes how to configure them:

- Required Validation           
Enable the [`isRequired`](https://surveyjs.io/form-library/documentation/questiontextmodel#isRequired) property for the form fields that should not be empty.

- Number Range Validation            
Define an object with the `type` property set to `"numeric"` and add it to the [`validators`](https://surveyjs.io/form-library/documentation/questiontextmodel#validators) array. Use the [`minValue`](https://surveyjs.io/form-library/documentation/numericvalidator#minValue) and [`maxValue`](https://surveyjs.io/form-library/documentation/numericvalidator#maxValue) properties within this object to specify the range. Alternatively, you can use the [`min`](https://surveyjs.io/form-library/documentation/questiontextmodel#min) and [`max`](https://surveyjs.io/form-library/documentation/questiontextmodel#max) properties in the question object as shown in this demo.

- RegEx Validation          
Define an object with the `type` property set to `"regex"` and add it to the `validators` array. Assign a regular expression to the [`regex`](https://surveyjs.io/form-library/documentation/regexvalidator#regex) property within this object (see the "Phone number" form field in this demo).

To learn more about data validation in SurveyJS Form Library, refer to the following help topic: [Data Validation](https://surveyjs.io/form-library/documentation/data-validation).

## Files

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

```ts
export const json = {
  "elements": [{
    "name": "number",
    "type": "text",
    "title": "Enter a number from 0 to 100",
    "inputType": "number",
    "min": 0,
    "max": 100,
    "defaultValue": 0,
    "isRequired": true
  }, {
    "name": "range",
    "type": "text",
    "title": "Select a value",
    "description": "You can use the more advanced <a href='https://surveyjs.io/form-library/examples/single-value-slider-input/'>Slider</a> question type instead.",
    "inputType": "range",
    "min": 0,
    "max": 100,
    "step": 10,
    "defaultValue": 90
  }, {
    "name": "phone",
    "type": "text",
    "title": "Enter a phone number",
    "inputType": "tel",
    "placeholder": "+0 (000) 000-00-00",
    "autocomplete": "tel",
    "validators": [{
      "type": "regex",
      "regex": "\\+[0-9]{1} \\([0-9]{3}\\) [0-9]{3}-[0-9]{2}-[0-9]{2}",
      "text": "Phone number must be in the following format: +0 (000) 000-00-00"
    }]
  }]
};
```

### `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.onTextMarkdown.add((_, options) => {
            options.html = options.text;
        });
        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/numeric-entry-question/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/numeric-entry-question/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/numeric-entry-question/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/numeric-entry-question/vanillajs.md)