Angular Form - Overview

The Form component builds a data entry UI for an object assigned to the formData property. The component displays and aligns label-editor pairs for each field in the bound object.

DevExtreme Accessibility Compliance

DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo's accessibility level, click the Run AXE^® Validation button to launch the AXE^® web accessibility evaluation tool.

All trademarks or registered trademarks are property of their respective owners. AXE^® Terms of Use

The overall accessibility level of your application depends on the Form features used.

Backend API

<div id="form-demo"> <div class="widget-container"> @if (labelMode === 'outside') { <div>Select company:</div> } <dx-select-box #company displayExpr="Name" [inputAttr]="{ 'aria-label': 'Company' }" [(dataSource)]="companies" label="Select company" [labelMode]="getCompanySelectorLabelMode()" [value]="companies[0]" ></dx-select-box> <dx-form id="form" [(formData)]="company.value" [readOnly]="readOnly" [labelMode]="labelMode" [showColonAfterLabel]="showColon" [labelLocation]="labelLocation" [minColWidth]="minColWidth" [colCount]="colCount" [width]="width" ></dx-form> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Label mode:</span> <dx-select-box [items]="['outside', 'static', 'floating', 'hidden']" [inputAttr]="{ 'aria-label': 'Label Mode' }" [(value)]="labelMode" ></dx-select-box> </div> <div class="option"> <span>Label location:</span> <dx-select-box [items]="['left', 'top']" [inputAttr]="{ 'aria-label': 'Label Location' }" [(value)]="labelLocation" ></dx-select-box> </div> <div class="option"> <span>Columns count:</span> <dx-select-box [items]="['auto', 1, 2, 3]" [inputAttr]="{ 'aria-label': 'Column Count' }" [(value)]="colCount" ></dx-select-box> </div> <div class="option"> <span>Min column width:</span> <dx-select-box [items]="[150, 200, 300]" [inputAttr]="{ 'aria-label': 'Min Column Width' }" [(value)]="minColWidth" ></dx-select-box> </div> <div class="option"> <span>Form width:</span> <dx-number-box [max]="550" [(value)]="width" [inputAttr]="{ 'aria-label': 'Form Width' }" ></dx-number-box> </div> <div class="option"> <dx-check-box text="readOnly" [(value)]="readOnly"></dx-check-box> </div> <div class="option"> <dx-check-box text="showColonAfterLabel" [(value)]="showColon" ></dx-check-box> </div> </div> </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxCheckBoxModule, DxNumberBoxModule, DxSelectBoxModule } from 'devextreme-angular'; import { DxFormModule, DxFormTypes } from 'devextreme-angular/ui/form'; import { Company, 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: [ DxCheckBoxModule, DxSelectBoxModule, DxNumberBoxModule, DxFormModule, ], }) export class AppComponent { companies: Company[]; width: number; labelMode: DxFormTypes.FormLabelMode = 'floating'; labelLocation: DxFormTypes.LabelLocation = 'left'; readOnly = false; showColon = true; minColWidth = 300; colCount = 2; constructor(service: Service) { this.companies = service.getCompanies(); } getCompanySelectorLabelMode() { return this.labelMode === 'outside' ? 'hidden' : this.labelMode; } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep .widget-container { margin-right: 320px; padding: 20px; max-width: 550px; min-width: 300px; } ::ng-deep #form { margin-top: 25px; } .options { padding: 20px; position: absolute; bottom: 0; right: 0; width: 260px; top: 0; background-color: rgba(191, 191, 191, 0.15); } .caption { font-size: 18px; font-weight: 500; } ::ng-deep.option { margin-top: 10px; }

import { Injectable } from '@angular/core'; export class Company { ID: number; Name: string; Address: string; City: string; State: string; ZipCode: number; Phone: string; Fax: string; Website: string; Active: boolean; } const companies: Company[] = [{ ID: 1, Name: 'Super Mart of the West', Address: '702 SW 8th Street', City: 'Bentonville', State: 'Arkansas', ZipCode: 72716, Phone: '(800) 555-2797', Fax: '(800) 555-2171', Website: '', Active: true, }, { ID: 2, Name: 'Electronics Depot', Address: '2455 Paces Ferry Road NW', City: 'Atlanta', State: 'Georgia', ZipCode: 30339, Phone: '(800) 595-3232', Fax: '(800) 595-3231', Website: '', Active: true, }, { ID: 3, Name: 'K&S Music', Address: '1000 Nicllet Mall', City: 'Minneapolis', State: 'Minnesota', ZipCode: 55403, Phone: '(612) 304-6073', Fax: '(612) 304-6074', Website: '', Active: true, }, { ID: 4, Name: "Tom's Club", Address: '999 Lake Drive', City: 'Issaquah', State: 'Washington', ZipCode: 98027, Phone: '(800) 955-2292', Fax: '(800) 955-2293', Website: '', Active: true, }]; @Injectable() export class Service { getCompanies(): Company[] { return companies; } }

<!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>

You can use the editors on the right to modify the following properties:

labelMode: "outside" | "static" | "floating" | "hidden"
Specifies label display mode.
labelLocation: "top" | "left" | "right"
Specifies whether to place outer labels above, to the left, or to the right of corresponding editors. The latter location is not demonstrated in this example.
colCount
Specifies the number of columns in the layout. To build an adaptive layout where the column count depends on the container width, set this property's value to "auto".
minColWidth
Specifies the minimum column width. Use this property when the colCount property's value is "auto".
width
Specifies the Form component's width.
readOnly
Makes the Form editors read-only.
showColonAfterLabel
Specifies whether the Form displays a colon after a label.

To get started with the DevExtreme Form component, refer to the following tutorial for step-by-step instructions: Getting Started with Form.