-
AI-powered Extensions
-
Data Grid
-
Tree List
-
Chat
-
HTML Editor
-
Form
-
-
Data Grids / Data Management
-
Data Grid
- Overview
-
Data Binding
-
Filtering
- Sorting
-
Editing
-
Grouping
-
Selection
- Focused Row
- Paging
-
Scrolling
-
Columns
- AI Assistant
-
Master-Detail
-
Data Summaries
-
Drag & Drop
-
Export to PDF
-
Export to Excel
- Appearance
-
Customization
- State Persistence
-
Adaptability
-
Keyboard Navigation
- Right-To-Left Support
-
Tree List
- Overview
-
Data Binding
-
Filtering
- Sorting
-
Editing
-
Selection
- Focused Row
- Paging
-
Columns
- Drag & Drop
- State Persistence
- Adaptability
-
Keyboard Navigation
-
Card View
-
Pivot Grid
- Overview
-
Data Binding
-
Field Management
-
Data Summaries
- Drill Down
- Filtering
-
Scrolling
-
Export to Excel
- Chart Integration
- Customization
- State Persistence
-
Filter Builder
-
-
Data Visualization
-
Charts
- Overview
-
Data Binding
-
Common Concepts
-
Axis
-
Aggregation
-
Tooltips
-
Selection
-
Customization
-
Zooming
-
Export
-
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Funnel and Pyramid Charts
-
Line Charts
- Pareto Chart
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
- Sankey Chart
-
Sparkline Charts
-
Tree Map
-
Gauges
- Overview
-
Runtime update
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
-
Scheduling / Planning
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Appointments
-
Timetable
- Editing
-
Grouping
- Virtual Scrolling
- Drag & Drop
-
Customization
- Adaptability
-
Gantt
- Overview
- Data Binding
-
Filtering
- Sorting
- Strip Lines
- Export to PDF
- Validation
-
Customization
-
-
Messaging
-
WYSIWYG Editor
-
Forms
-
Data Editors
- Overview
-
Common Concepts
-
Calendar
- Check Box
- Color Box
-
Date Box
-
Date Range Box
-
Number Box
- Radio Group
-
Range Selector
- Range Slider
- Slider
- Switch
- Text Area
- Text Box
-
Drop-Downs
- Autocomplete
-
Drop Down Box
-
Select Box
-
Tag Box
-
Lookup
-
Buttons
-
File Upload / File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Popup and Notifications
-
Navigation
- Overview
- Accordion
-
Action Sheet
-
Context Menu
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
-
Stepper
- Pagination
-
List
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Box
- Responsive Box
-
-
Interactive Wrappers
-
Sortable
- Resizable
-
-
Progress Indicators
-
Maps
- Overview
-
Map
-
Vector Map
-
Data Binding
- Multiple Layers
-
Markers
- Legend
-
Zooming and Panning
-
Customization
-
-
Localization
Related Demos:
Your search did not match any results.
Angular Forms - 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.
Backend API
<dx-form id="form" [formData]="employee">
<dxi-form-item itemType="group" cssClass="form-group" [colCount]="4">
<dxi-form-item>
<div class="form-avatar"></div>
</dxi-form-item>
<dxi-form-item itemType="group" [colSpan]="3">
<dxi-form-item dataField="FirstName"></dxi-form-item>
<dxi-form-item dataField="LastName"></dxi-form-item>
<dxi-form-item
dataField="BirthDate"
editorType="dxDateBox"
[editorOptions]="{ width: '100%' }"
></dxi-form-item>
</dxi-form-item>
</dxi-form-item>
<dxi-form-item itemType="group" cssClass="form-group" [colCount]="2">
<dxi-form-item itemType="group">
<dxi-form-item dataField="Address"></dxi-form-item>
<dxi-form-item dataField="City"></dxi-form-item>
<dxi-form-item
dataField="Position"
editorType="dxSelectBox"
[editorOptions]="{ items: positions, value: '' }"
></dxi-form-item>
</dxi-form-item>
<dxi-form-item itemType="group">
<dxi-form-item
dataField="State"
editorType="dxSelectBox"
[editorOptions]="{ items: states }"
></dxi-form-item>
<dxi-form-item dataField="ZipCode"></dxi-form-item>
<dxi-form-item
dataField="Mobile"
[label]="{ text: 'Phone' }"
[editorOptions]="{ mask: '+1 (000) 000-0000' }"
></dxi-form-item>
</dxi-form-item>
<dxi-form-item
dataField="Notes"
[colSpan]="2"
editorType="dxTextArea"
[editorOptions]="{ height: 140 }"
></dxi-form-item>
</dxi-form-item>
</dx-form>
import { bootstrapApplication } from '@angular/platform-browser';
import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
import {
DxFormModule,
} from 'devextreme-angular';
import 'devextreme/ui/select_box';
import 'devextreme/ui/text_area';
import { Service, Employee } 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;
positions: string[];
states: string[];
constructor(service: Service) {
this.employee = service.getEmployee();
this.positions = service.getPositions();
this.states = service.getStates();
}
}
bootstrapApplication(AppComponent, {
providers: [
provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
],
});
::ng-deep .form-group {
padding: 20px;
}
::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;
}
}
<!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>
�PNG
IHDR �~� FIDAT��ٯeY���[k�y��|ϝo�9g��U�U��6�,����O<�߀�� ��d�@��cUuM�Y9Df�w���sϼϞ��k}D�{�Fݦ��q?$"�v��W��ڵk_��Zõk]��\�v�+cp�ڵ����k2]��\�v�+cp�ڵ����k2��m#����;�����q��oD�^"
���!\�w�k�n@ ����H��O��^B�� �4 2P��qd�#" ��_ @��k�F��: �KD�c �T��_Y���� @1@����!�q���k�~h�.� �H ¿� ����R
���CD "