Overview
DevExtreme Angular Form is a responsive UI component for viewing and editing data. This component represents a data object as a collection of label-editor pairs. It is available for Angular and thus supports AOT compilation, TypeScript compile-time checking, and declarative configuration. This demo shows how to add and customize the Form on a page. DevExtreme provides other widgets, like Filter Builder, Range Selector, Radio Group, which are more specialized. You can find their demos and more demos of the Form in this section.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<dx-form id="form" [formData]="employee">
<dxi-item itemType="group" cssClass="first-group" [colCount]="4">
<dxi-item>
<div class="form-avatar"></div>
</dxi-item>
<dxi-item itemType="group" [colSpan]="3">
<dxi-item dataField="FirstName"></dxi-item>
<dxi-item dataField="LastName"></dxi-item>
<dxi-item
dataField="BirthDate"
editorType="dxDateBox"
[editorOptions]="{ width: '100%' }"
></dxi-item>
</dxi-item>
</dxi-item>
<dxi-item itemType="group" cssClass="second-group" [colCount]="2">
<dxi-item itemType="group">
<dxi-item dataField="Address"></dxi-item>
<dxi-item dataField="City"></dxi-item>
<dxi-item
dataField="Position"
editorType="dxSelectBox"
[editorOptions]="{ items: positions, value: '' }"
></dxi-item>
</dxi-item>
<dxi-item itemType="group">
<dxi-item
dataField="State"
editorType="dxSelectBox"
[editorOptions]="{ items: states }"
></dxi-item>
<dxi-item dataField="ZipCode"></dxi-item>
<dxi-item
dataField="Mobile"
[label]="{ text: 'Phone' }"
[editorOptions]="{ mask: '+1 (000) 000-0000' }"
></dxi-item>
</dxi-item>
<dxi-item
dataField="Notes"
[colSpan]="2"
editorType="dxTextArea"
[editorOptions]="{ height: 140 }"
></dxi-item>
</dxi-item>
</dx-form>
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {
DxSelectBoxModule,
DxTextAreaModule,
DxDateBoxModule,
DxFormModule,
} from 'devextreme-angular';
import { Service, Employee } from './app.service';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
providers: [Service],
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
})
export class AppComponent {
employee: Employee;
positions: string[];
states: string[];
constructor(service: Service) {
this.employee = service.getEmployee();
this.positions = service.getPositions();
this.states = service.getStates();
}
}
@NgModule({
imports: [
BrowserModule,
DxSelectBoxModule,
DxTextAreaModule,
DxDateBoxModule,
DxFormModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .first-group,
::ng-deep .second-group {
padding: 20px;
}
::ng-deep .second-group {
background-color: rgba(191, 191, 191, 0.15);
}
::ng-deep .form-avatar {
height: 128px;
width: 128px;
margin-right: 10px;
border: 1px solid #d2d3d5;
border-radius: 50%;
background-image: url('../../../../images/petersmith.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
import { Injectable } from '@angular/core';
export class Employee {
ID: number;
FirstName: string;
LastName: string;
Position: string;
BirthDate: string;
HireDate: string;
Notes: string;
Address: string;
City: string;
State: string;
ZipCode: string;
Mobile: string;
Home: string;
Email: string;
Skype: string;
}
const employee: Employee = {
ID: 1,
FirstName: 'John',
LastName: 'Heart',
Position: 'CEO',
BirthDate: '1964/03/16',
HireDate: '1995/01/15',
Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAV as its CEO since 2003.\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
Address: '351 S Hill St.',
City: 'Los Angeles',
State: 'CA',
ZipCode: '90013',
Home: '555-684-1334',
Mobile: '555-684-1335',
Email: 'jheart@dx-email.com',
Skype: 'jheart_DX_skype',
};
const positions: string[] = [
'HR Manager',
'IT Manager',
'CEO',
'Controller',
'Sales Manager',
'Support Manager',
'Shipping Manager',
];
const states: string[] = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];
@Injectable()
export class Service {
getEmployee() {
return employee;
}
getPositions() {
return positions;
}
getStates() {
return states;
}
}
// 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:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
'typescript': {
'exports': 'ts',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'@angular/core': 'npm:@angular/core@12.2.16',
'@angular/platform-browser': 'npm:@angular/platform-browser@12.2.16',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.16',
'@angular/forms': 'npm:@angular/forms@12.2.16',
'@angular/common': 'npm:@angular/common@12.2.16',
'@angular/compiler': 'npm:@angular/compiler@12.2.16',
'tslib': 'npm:tslib@2.3.1/tslib.js',
'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js',
'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@22.2.3/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme@22.2.3/bundles/dx.all.js',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.18/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.65',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.37',
'devextreme-angular': 'npm:devextreme-angular@22.2.3',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.7.1/standalone.js',
'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.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',
},
'rxjs': {
defaultExtension: 'js',
},
'rxjs/operators': {
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
'npm:@angular/*/package.json',
'npm:@angular/common@12.2.16/*/package.json',
'npm:rxjs@7.5.3/package.json',
'npm:rxjs@7.5.3/operators/package.json',
'npm:devextreme-angular@22.2.3/*/package.json',
'npm:devextreme-angular@22.2.3/ui/*/package.json',
'npm:devextreme-angular@22.2.3/package.json',
'npm:devexpress-diagram@2.1.65/package.json',
'npm:devexpress-gantt@4.1.37/package.json',
],
};
System.config(window.config);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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="https://cdn3.devexpress.com/jslib/22.2.3/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.12.0/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></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>