DevExtreme jQuery - 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
],
// ...
})See Also
Feedback