DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Generate a Data Object from Form Items

Not only you can bind the Form to an existing data object, but you can also generate a new data object directly from the Form items. For this purpose, bind simple items from the items array to not-yet-existing data fields using the dataField option. Once a user enters a value into such an item, the corresponding data field is created in the data object. To obtain this data object, get the value of the formData option using the option(optionName) method.

$(function() {
        items: [{
            dataField: "firstName",
            editorType: "dxTextBox"
        }, {
            dataField: "lastName",
            editorType: "dxTextBox"
        }, {
            dataField: "birthDate",
            editorType: "dxDateBox"
        onFieldDataChanged: function(e) {
            var newFormData = e.component.option("formData");
            // ...
    <dxi-item dataField="firstName" editorType="dxTextBox"></dxi-item>
    <dxi-item dataField="lastName"  editorType="dxTextBox"></dxi-item>
    <dxi-item dataField="birthDate" editorType="dxDateBox"></dxi-item>
import { DxFormModule } from 'devextreme-angular';
// ...
export class AppComponent {
    employee = { }
    form_fieldDataChanged (e) {
        this.employee = e.component.option("formData");
        // ...
    imports: [
        // ...
    // ...
See Also