Your search did not match any results.
Forms and Multi-Purpose


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.

<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( { 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; } let 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": "", "Skype": "jheart_DX_skype", }; let positions: string[] = [ "HR Manager", "IT Manager", 'CEO', "Controller", "Sales Manager", "Support Manager", "Shipping Manager" ]; let 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: // window.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.3.0/tslib.js', 'rxjs': 'npm:rxjs@6.4.0', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.27.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@21.1.4/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@21.1.4/bundles/dx.all.js', 'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.1.4/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.19', 'devexpress-gantt': 'npm:devexpress-gantt@2.1.42', 'devextreme-angular': 'npm:devextreme-angular@21.1.4', '@devextreme/vdom': 'npm:@devextreme/vdom@1.2.2', 'inferno': 'npm:inferno@7.4.8/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.8/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.8/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.8/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.8/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.8/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.8/dist/inferno-extras.min.js' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, '@devextreme/vdom': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "npm:@devextreme/*/package.json", "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", ] }; System.config(window.config);
<!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>