Angular Form - Grouping

You can organize Form items in groups and tabs. To do this, declare Group and Tabbed items in the items[] array. Each group and tab can have their own layout and contain other item types.

Backend API

<div class="long-title"> <h3>Personal details</h3> </div> <div id="form-container"> <dx-form id="form" [formData]="employee" [colCount]="2"> <dxi-form-item itemType="group" captionTemplate="info" caption="System Information" > <dxi-form-item dataField="ID"></dxi-form-item> <dxi-form-item itemType="group" captionTemplate="user" caption="Main Information" > <dxi-form-item dataField="FirstName"></dxi-form-item> <dxi-form-item dataField="LastName"></dxi-form-item> <dxi-form-item dataField="HireDate"></dxi-form-item> <dxi-form-item dataField="Position"></dxi-form-item> <dxi-form-item dataField="OfficeNo"></dxi-form-item> </dxi-form-item> </dxi-form-item> <dxi-form-item itemType="group" captionTemplate="personal" caption="Personal Data" > <dxi-form-item dataField="BirthDate"></dxi-form-item> <dxi-form-item itemType="group" captionTemplate="address" caption="Home Address" > <dxi-form-item dataField="Address"></dxi-form-item> <dxi-form-item dataField="City"></dxi-form-item> <dxi-form-item dataField="State"></dxi-form-item> <dxi-form-item dataField="Zipcode"></dxi-form-item> </dxi-form-item> </dxi-form-item> <dxi-form-item itemType="group" captionTemplate="contact" caption="Contact Information" > <dxi-form-item itemType="tabbed"> <dxo-form-tab-panel-options [deferRendering]="false"> </dxo-form-tab-panel-options> <dxi-form-tab title="Phone"> <dxi-form-item dataField="Phone"></dxi-form-item> </dxi-form-tab> <dxi-form-tab title="Skype"> <dxi-form-item dataField="Skype"></dxi-form-item> </dxi-form-tab> <dxi-form-tab title="Email"> <dxi-form-item dataField="Email"></dxi-form-item> </dxi-form-tab> </dxi-form-item> </dxi-form-item> @for (label of groupCaptionTemplates; track label.name) { <ng-container> <div *dxTemplate="let data of label.name"> <i class="dx-icon {{ label.icon }}"></i><span>{{ data.caption }}</span> </div> </ng-container> } </dx-form> </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxFormModule } from 'devextreme-angular'; import { Employee, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxFormModule, ], }) export class AppComponent { employee: Employee; groupCaptionTemplates: { name: string; icon: string }[]; constructor(service: Service) { this.employee = service.getEmployee(); this.groupCaptionTemplates = [ { name: 'user', icon: 'dx-icon-user' }, { name: 'info', icon: 'dx-icon-info' }, { name: 'personal', icon: 'dx-icon-card' }, { name: 'address', icon: 'dx-icon-home' }, { name: 'contact', icon: 'dx-icon-tel' }, ]; } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #form-container { margin: 10px; } ::ng-deep .long-title h3 { font-size: 24px; text-align: center; line-height: 2em; } ::ng-deep .dx-form-group-custom-caption .dx-template-wrapper { display: flex; align-items: center; } ::ng-deep .dx-form-group-custom-caption .dx-icon { color: var(--dx-color-spin-icon); } ::ng-deep .dx-form-group-custom-caption span { line-height: 1; }

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; } const 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: '(213) 555-9392', Email: 'jheart@dx-email.com', Skype: 'jheart_DX_skype', }; @Injectable() export class Service { getEmployee(): Employee { return employee; } }

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>

To create a group item, assign "group" to the itemType property. To specify a group's title, use the caption property. To replace a group's title with custom content, implement a caption template. This demo shows three groups. The Personal Data group is nested in the System Information group.

To create a tabbed item, assign "tabbed" to the itemType property. This demo shows a tabbed item nested in the Contact Information group. The Form uses the TabPanel component to display tabs. You can specify the TabPanel's properties in the tabPanelOptions object. This demo disables the deferRendering property to render TabPanel's content immediately.