Vue Form - Overview

The Form UI component represents fields of a data object as a collection of label-editor pairs. These pairs can be arranged in several groups, tabs and columns.

View Demo

The following code adds the Form UI component to your page. The simplest configuration of this UI component includes only a data object.

jQuery
HTML
JavaScript
<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
HTML
TypeScript
<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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxForm :form-data="employee" />
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxForm from 'devextreme-vue/form';

const 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'
};

export default {
    components: {
        DxForm
    },
    data() {
        return {
            employee
        };
    }
};
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import Form from 'devextreme-react/form';

const 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'
};

class App extends React.Component {
    render() {
        return (
            <Form formData={employee} />
        );
    }
}

export default App;

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