DevExtreme jQuery/JS - Overview
The Form widget represents fields of a data object as a collection of label-editor pairs. These pairs can be arranged in several groups, tabs and columns.
The following code adds the Form widget to your page. The simplest configuration of this widget includes only a data object.
jQuery
<div id="formContainer"></div>
$(function() { $("#formContainer").dxForm({ formData: { firstName: "John", lastName: "Heart", position: "CEO", officeNo: 901, birthDate: new Date(1964, 3, 15), hireDate: new Date(2012, 4, 13), city: "Los Angeles", phone: "+1(213) 555-9392", email: "jheart@dx-email.com" } }); });
Angular
<dx-form [(formData)]="employee"> </dx-form>
import { DxFormModule } from 'devextreme-angular'; // ... export class AppComponent { employee = { firstName: "John", lastName: "Heart", position: "CEO", officeNo: 901, birthDate: new Date(1964, 3, 15), hireDate: new Date(2012, 4, 13), city: "Los Angeles", phone: "+1(213) 555-9392", email: "jheart@dx-email.com" } } @NgModule({ imports: [ // ... DxFormModule ], // ... })
The configuration above creates one label-editor pair per each field of the data object. Such a pair is called "simple item". Simple items can be organized in groups, tabs and columns.
See Also
- Widget Basics: jQuery | Angular | AngularJS | Knockout
- Form - Configure Simple Items
- Form - Organize Simple Items
- Form - Configure Item Labels
- Form - Change Options at Runtime
- Form - Handle the Value Change Event
- Form - Update Form Data Using the API
- Form - Generate a Data Object from Form Items
- Form - Validate and Submit the Form
- Form API Reference
If you have technical questions, please create a support ticket in the DevExpress Support Center.