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.

jQuery

JavaScript

$(function() {
    $("#formContainer").dxForm({
        items: [{
            dataField: "firstName",
            editorType: "dxTextBox"
        }, {
            dataField: "lastName",
            editorType: "dxTextBox"
        }, {
            dataField: "birthDate",
            editorType: "dxDateBox"
        }],
        onFieldDataChanged: function(e) {
            var newFormData = e.component.option("formData");
            // ...
        }
    });
});

Angular

HTML

TypeScript

<dx-form
    (onFieldDataChanged)="form_fieldDataChanged($event)">
    <dxi-item dataField="firstName" editorType="dxTextBox"></dxi-item>
    <dxi-item dataField="lastName"  editorType="dxTextBox"></dxi-item>
    <dxi-item dataField="birthDate" editorType="dxDateBox"></dxi-item>
</dx-form>

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = { }
    form_fieldDataChanged (e) {
        this.employee = e.component.option("formData");
        // ...
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

Generate a Data Object from Form Items

jQuery

Angular

See Also