JavaScript/jQuery Form - 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 property. 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 property 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
],
// ...
})Vue
App.vue
<template>
<DxForm @field-data-changed="formFieldDataChanged">
<DxSimpleItem data-field="firstName" editor-type="dxTextBox" />
<DxSimpleItem data-field="lastName" editor-type="dxTextBox" />
<DxSimpleItem data-field="birthDate" editor-type="dxDateBox" />
</DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxForm, DxSimpleItem } from 'devextreme-vue/form';
const employee = { };
export default {
components: {
DxForm, DxSimpleItem
},
data() {
return {
employee
};
},
methods: {
formFieldDataChanged(e) {
this.employee = e.component.option("formData");
}
}
};
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { Form, SimpleItem } from 'devextreme-react/form';
class App extends React.Component {
constructor() {
super();
this.formFieldDataChanged = this.formFieldDataChanged.bind(this);
}
employee = { };
render() {
return (
<Form onFieldDataChanged={this.formFieldDataChanged}>
<SimpleItem dataField="firstName" editorType="dxTextBox" />
<SimpleItem dataField="lastName" editorType="dxTextBox" />
<SimpleItem dataField="birthDate" editorType="dxDateBox" />
</Form>
);
}
formFieldDataChanged(e) {
this.employee = e.component.option("formData");
}
}
export default App;See Also
Feedback