Angular Form - In Tabs

Create a Tab

The Form UI component allows you to organize items in tabs. In the context of the Form, tabs are called "tabbed items". A tabbed item can contain simple items, other tabs, groups or empty items. To create a tabbed item, assign "tabbed" to the itemType property. To specify the collection of tabs, use the tabs array. To define items displayed within an individual tab, use its items array.

HTML
TypeScript
  • <dx-form
  • [(formData)]="employee">
  • <dxi-item dataField="name"></dxi-item>
  • <dxi-item itemType="tabbed">
  • <dxi-tab title="Info">
  • <dxi-item dataField="position"></dxi-item>
  • <dxi-item dataField="hireDate"></dxi-item>
  • <dxi-item dataField="city"></dxi-item>
  • </dxi-tab>
  • <dxi-tab title="Contacts">
  • <dxi-item dataField="phone"></dxi-item>
  • <dxi-item dataField="email"></dxi-item>
  • </dxi-tab>
  • </dxi-item>
  • </dx-form>
  • import { DxFormModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • employee = {
  • name: "John Heart",
  • position: "CEO",
  • hireDate: new Date(2012, 4, 13),
  • city: "Los Angeles",
  • phone: "+1(213) 555-9392",
  • email: "jheart@dx-email.com"
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxFormModule
  • ],
  • // ...
  • })

View Demo

Columns within a Tab

The content of a tab can be organized in columns. The colCount property instructs the tab about how many columns it must have. Note that the entire Form layout can also be organized in columns if the colCount property is declared on the root level. In this case, use the colSpan property to define how many general columns the tab must span.

HTML
TypeScript
  • <dx-form
  • [(formData)]="employee"
  • [colCount]="2"> <!-- Splits the Form layout in two columns -->
  • <dxi-item dataField="name"></dxi-item>
  • <dxi-item itemType="tabbed" [colSpan]="2">
  • <dxi-tab
  • title="Info"
  • [colCount]="3"> <!-- Organizes items inside this tab in three columns -->
  • <dxi-item dataField="position"></dxi-item>
  • <dxi-item dataField="hireDate"></dxi-item>
  • <dxi-item dataField="city"></dxi-item>
  • </dxi-tab>
  • <dxi-tab
  • title="Contacts"
  • [colCount]="2">
  • <dxi-item dataField="phone"></dxi-item>
  • <dxi-item dataField="email"></dxi-item>
  • </dxi-tab>
  • </dxi-item>
  • </dx-form>
  • import { DxFormModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • employee = {
  • name: "John Heart",
  • position: "CEO",
  • hireDate: new Date(2012, 4, 13),
  • city: "Los Angeles",
  • phone: "+1(213) 555-9392",
  • email: "jheart@dx-email.com"
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxFormModule
  • ],
  • // ...
  • })

Custom Content within a Tab

The Form UI component allows you to specify custom templates for an individual tab and its content. Use the dxTemplate component to declare templates.

HTML
TypeScript
  • <dx-form
  • [(formData)]="employee">
  • <dxi-item dataField="name"></dxi-item>
  • <dxi-item itemType="tabbed" [colSpan]="2">
  • <dxi-tab
  • title="Data Protection Policy"
  • tabTemplate="tab"
  • [template]="'tabContent'">
  • </dxi-tab>
  • <dxi-tab title="Info">
  • <dxi-item dataField="position"></dxi-item>
  • <dxi-item dataField="birthDate"></dxi-item>
  • <dxi-item dataField="city"></dxi-item>
  • </dxi-tab>
  • <dxi-tab title="Contacts">
  • <dxi-item dataField="phone"></dxi-item>
  • <dxi-item dataField="email"></dxi-item>
  • </dxi-tab>
  • </dxi-item>
  • <div *dxTemplate="let tabData of 'tab'; let i = index">
  • <p style="color:red">{{tabData.title}}</p>
  • </div>
  • <div *dxTemplate="let data of 'tabContent'">
  • <p>
  • <i>By filling out this form, you agree
  • to the terms of the <a href='#'>Data Protection Policy</a></i>
  • </p>
  • </div>
  • </dx-form>
  • import { DxFormModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • employee = {
  • name: "John Heart",
  • birthDate: new Date(1964, 3, 15),
  • position: "CEO",
  • city: "Los Angeles",
  • phone: "+1(213) 555-9392",
  • email: "jheart@dx-email.com"
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxFormModule
  • ],
  • // ...
  • })
See Also

Configure the Tab Panel

For displaying tabs, the Form uses the TabPanel UI component. Therefore, you can specify any properties of the TabPanel in the tabPanelOptions object.

HTML
TypeScript
  • <dx-form
  • [(formData)]="employee">
  • <dxi-item dataField="firstName"></dxi-item>
  • <dxi-item dataField="lastName"></dxi-item>
  • <dxi-item itemType="tabbed">
  • <dxo-tab-panel-options [height]="250" [onTitleClick]="tabPanel_tabTitleClick">
  • </dxo-tab-panel-options>
  • </dxi-item>
  • </dx-form>
  • import { DxFormModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • employee = {
  • firstName: "John",
  • lastName: "Heart",
  • // ...
  • }
  • tabPanel_tabTitleClick (e) {
  • // ...
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxFormModule
  • ],
  • // ...
  • })
See Also