Angular Form - Add an Empty Space

If you need to add an empty space between neighboring items, use an empty item. To create it, assign "empty" to the itemType property. To define how many columns the empty item must span, specify the colSpan property. For the full list of available properties, visit the Empty Item section.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            position: "CEO"
        },
        colCount: 2,
        items: [{
            itemType: "empty"
        }, "firstName", {
            itemType: "empty",
            colSpan: 2
        }, "lastName", "position"]
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    [colCount]="2">
    <dxi-item itemType="empty"></dxi-item>
    <dxi-item dataField="firstName"></dxi-item>
    <dxi-item itemType="empty" [colSpan]="2"></dxi-item>
    <dxi-item dataField="lastName"></dxi-item>
    <dxi-item dataField="position"></dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        position: "CEO"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxForm
        :form-data="employee"
        :col-count="2">
        <DxEmptyItem />
        <DxSimpleItem data-field="firstName" />
        <DxEmptyItem :col-span="2" />
        <DxSimpleItem data-field="lastName" />
        <DxSimpleItem data-field="position" />
    </DxForm>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxEmptyItem, DxSimpleItem } from 'devextreme-vue/form';

export default {
    components: {
        DxForm, DxSimpleItem, DxEmptyItem
    },
    data() {
        return {
            employee: {
                firstName: 'John',
                lastName: 'Heart',
                position: 'CEO'
            }
        }
    }
}
</script>
React
App.js
import React from 'react';

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

import { Form, EmptyItem, SimpleItem } from 'devextreme-react/form';

class App extends React.Component {
    employee = {
        firstName: 'John',
        lastName: 'Heart',
        position: 'CEO'
    }

    render() {
        return (
            <Form
                formData={this.employee}
                colCount={2}>
                <EmptyItem />
                <SimpleItem dataField="firstName" />
                <EmptyItem colSpan={2} />
                <SimpleItem dataField="lastName" />
                <SimpleItem dataField="position" />
            </Form>
        );
    }
}
export default App;
See Also