Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Your search did not match any results.

Grouped Fields


This demo illustrates how to organize Form items into groups and tabbed pages. For this purpose, an array containing «group» and «tabbed» items is passed to the items property.

Copy to CodeSandBox
<div class="long-title"> <h3>Personal details</h3> </div> <div id="form-container"> <dx-form id="form" [formData]="employee" [colCount]="2"> <dxi-item itemType="group" caption="System Information"> <dxi-item dataField="ID"></dxi-item> <dxi-item dataField="FirstName"></dxi-item> <dxi-item dataField="LastName"></dxi-item> <dxi-item dataField="HireDate"></dxi-item> <dxi-item dataField="Position"></dxi-item> <dxi-item dataField="OfficeNo"></dxi-item> </dxi-item> <dxi-item itemType="group" caption="Personal Data"> <dxi-item dataField="BirthDate"></dxi-item> <dxi-item itemType="group" caption="Home Address"> <dxi-item dataField="Address"></dxi-item> <dxi-item dataField="City"></dxi-item> <dxi-item dataField="State"></dxi-item> <dxi-item dataField="Zipcode"></dxi-item> </dxi-item> </dxi-item> <dxi-item itemType="group" caption="Contact Information"> <dxi-item itemType="tabbed"> <dxo-tab-panel-options [deferRendering]="false"> </dxo-tab-panel-options> <dxi-tab title="Phone"> <dxi-item dataField="Phone"></dxi-item> </dxi-tab> <dxi-tab title="Skype"> <dxi-item dataField="Skype"></dxi-item> </dxi-tab> <dxi-tab title="Email"> <dxi-item dataField="Email"></dxi-item> </dxi-tab> </dxi-item> </dxi-item> </dx-form> </div>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxFormModule } from 'devextreme-angular'; import { Employee, Service } from './app.service'; if(!/localhost/.test( { enableProdMode(); } @Component({ selector: 'demo-app', providers: [ Service ], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { employee: Employee; constructor( service: Service ) { this.employee = service.getEmployee(); } } @NgModule({ imports: [ BrowserModule, DxFormModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #form-container { margin: 10px; } ::ng-deep .long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }
import { Injectable } from '@angular/core'; export class Employee { ID: number; FirstName: string; LastName: string; CompanyName: string; Position: string; OfficeNo: string; BirthDate: Date; HireDate: Date; Address: string; City: string; State: string; Zipcode: string; Phone: string; Email: string; Skype: string; } let employee: Employee = { ID: 1, FirstName: "John", LastName: "Heart", CompanyName: "Super Mart of the West", Position: "CEO", OfficeNo: "901", BirthDate: new Date(1964, 2, 16), HireDate: new Date(1995, 0, 15), Address: "351 S Hill St.", City: "Los Angeles", State: "CA", Zipcode: "90013", Phone: "+1(213) 555-9392", Email: "", Skype: "jheart_DX_skype" }; @Injectable() export class Service { getEmployee() : Employee { return employee; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, 'devextreme/localization.js': { "esModule": true } }, paths: { 'npm:': '' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.5.3/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib@2.1.0/tslib.js', 'rxjs': 'npm:rxjs@6.4.0', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.5', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.11', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.18', 'devextreme-angular': 'npm:devextreme-angular@20.2.5', 'preact': 'npm:preact@10.5.11/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.11/hooks/dist/hooks.js' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular/*/package.json", "npm:devextreme-angular/ui/*/package.json", "npm:devextreme-angular/package.json", "npm:devexpress-diagram/package.json", "npm:devexpress-gantt/package.json", ] });
<!DOCTYPE html> <html xmlns=""> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>