---
title: Multiple Textboxes
product: Form Library
description: Multiple Textboxes is a type of question with multiple text input fields, which allows you to group related open-ended questions such as values of a full legal name together. View this free demo example for JavaScript to learn more.
framework: Angular
source: https://surveyjs.io/form-library/examples/multiple-text-box-question/angular
index: https://surveyjs.io/form-library/examples/overview.md
---

# Multiple Textboxes (Angular)

A Multiple Text Box question contains multiple text entry fields that allow users to enter more than one short text response in a single question. This question type is perfect if you need to collect answers to a group of related open-ended questions without choice options (contact information, full legal name). Built-in input validation allows you to verify input values and make sure they conform with the specified format, such as an email, password, or phone number. This demo shows how to create and add a question with multiple responses to a form and run it in your JavaScript framework.

## Create a Multiple Text Box Question

To create a question with multiple text input fields, define an object with the `type` property set to `"multipletext"` and add it to the [`elements`](https://surveyjs.io/form-library/documentation/api-reference/page-model#elements) array. Use the [`items`](https://surveyjs.io/form-library/documentation/api-reference/multiple-text-entry-question-model#items) array to configure the text input fields. Each object in this array should have at least the following properties:

```js
{
  "name": any, // A unique value used to identify an input item and save an item value to survey results.
  "title": string // An item caption. When `title` is undefined, `name` is used. This property supports Markdown.
}
```

For a full list of available properties, refer to the [`MultipleTextItemModel`](https://surveyjs.io/form-library/documentation/api-reference/multipletextitemmodel) class documentation.

## Specify Input Type

If an input field requires specific values, 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"`, `"email"`, `"password"`, and the default `"text"` input types.

## Validate Input 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.

- Expression Validation           
Define an object with the `type` property set to `"expression"` and add it to the `validators` array. Assign a [Boolean expression](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-visibility) to the [`expression`](https://surveyjs.io/form-library/documentation/api-reference/expressionvalidator#expression) property within this object (see the "Highest price" form field 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 Password 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).

## Access Input Values

A Multiple Text Box question adds an object with the structure described below to survey results:

```js
{
  "multipleTextBoxQuestionName": { // Question name
    // Individual text field values
    "item1Name": "item1Value",
    "item2Name": "item2Value",
    // ...
    "itemNName": "itemNValue"
  }
}
```

Refer to the following help topic for information on how to access individual item values in JavaScript code: [Access Survey Results](https://surveyjs.io/form-library/documentation/handle-survey-results-access).

If you want to reference an item in expressions, use the following notation: `{questionname.itemname}`. For more information about expression syntax, refer to the [Conditional Logic and Dynamic Texts](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic) documentation article.

## Files

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

```ts
export const json = {
  "checkErrorsMode": "onValueChanged",
  "elements": [
    {
      "type": "multipletext",
      "name": "pricelimit",
      "title": "How much would you be willing to pay for a product like ours?",
      "isRequired": true,
      "items": [
        {
          "name": "mostamount",
          "title": "Highest price",
          "inputType": "number",
          "validators": [{
            "type": "expression",
            "expression": "{pricelimit.mostamount} empty or {pricelimit.leastamount} empty or {pricelimit.mostamount} >= {pricelimit.leastamount}",
            "text": "The highest price must be higher than the lowest price."
          }, {
            "type": "numeric",
            "minValue": 0,
            "text": "Price cannot be less than zero."
          }]
        },
        {
          "name": "leastamount",
          "title": "Lowest price",
          "inputType": "number",
          "validators": [{
            "type": "numeric",
            "minValue": 0,
            "text": "Price cannot be less than zero."
          }]
        }
      ]
    },
    {
      "type": "multipletext",
      "name": "register",
      "title": "Register Form",
      "items": [
        {
          "name": "username",
          "isRequired": true,
          "title": "<i class='fa fa-user icon'></i> Username",
          "maxLength": 20
        },
        {
          "name": "email",
          "title": "<i class='fa fa-envelope icon'></i> Email",
          "inputType": "email"
        },
        {
          "name": "password",
          "title": "<i class='fa fa-key icon'></i> Password",
          "inputType": "password",
          "validators": [
            {
              "type": "regex",
              "text": "Your password must be at least 8 characters long and contain at least one letter and one number.",
              "regex": "^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$"
            }
          ]
        }
      ]
    }
  ]
};
```

### `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";
import { marked } from "marked";

@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) => {
            // Convert Markdown to HTML
            let str = marked(options.text);
            // Remove root paragraphs <p></p>
            str = str.substring(3);
            str = str.substring(0, str.length - 5);
            // Set HTML markup to render
            options.html = str;
        });
        
        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
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<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",
    "marked": "latest",
    "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/multiple-text-box-question/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/multiple-text-box-question/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/multiple-text-box-question/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/multiple-text-box-question/vanillajs.md)