Vue Form - Add a Button

You can add a button that performs a custom action using a button item by setting the itemType property to "button". Then, configure the button using the buttonOptions object which can contain any Button UI component property.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            name: "John Heart",
            email: "jheart@dx-email.com"
        },
        colCount: 2,
        items: [
            "name", 
            { itemType: "empty" }, 
            "email", 
            {
                itemType: "button",
                alignment: "left",
                buttonOptions: {
                    text: "Send an Email",
                    onClick: function () {
                        // ...
                    }
                }
            }
        ]
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    [colCount]="2">
    <dxi-item dataField="name"></dxi-item>
    <dxi-item itemType="empty"></dxi-item>
    <dxi-item dataField="email"></dxi-item>
    <dxi-item 
        itemType="button" 
        alignment="left"
        [buttonOptions]="buttonOptions">
    </dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        name: "John Heart",
        email: "jheart@dx-email.com"
    }
    buttonOptions = {
        text: "Send an Email",
        onClick: function () {
            // ...
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxForm
        :form-data="employee"
        :col-count="2">
        <DxSimpleItem data-field="name" />
        <DxEmptyItem />
        <DxSimpleItem data-field="email" />
        <DxButtonItem alignment="left">
            <DxButtonOptions
                text="Send an Email"
                :on-click="buttonClick" />
        </DxButtonItem>
    </DxForm>
</template>

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

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

export default {
    components: {
        DxForm, DxEmptyItem, DxSimpleItem, DxButtonItem, DxButtonOptions
    },
    data() {
        return {
            employee: {
                name: 'John Heart',
                email: 'jheart@dx-email.com'
            }
        }
    },
    methods: {
        buttonClick(e) {
            // ...
        }
    }
}
</script>
React
App.js
import React from 'react';

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

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

class App extends React.Component {
    constructor() {
        super();
        this.buttonClick = this.buttonClick.bind(this);
    }

    employee = {
        name: 'John Heart',
        email: 'jheart@dx-email.com'
    }

    render() {
        return (
            <Form
                formData={this.employee}
                colCount={2}>
                <SimpleItem dataField="name" />
                <EmptyItem />
                <SimpleItem dataField="email" />
                <ButtonItem alignment="left">
                    <ButtonOptions
                        text="Send an Email"
                        onClick={this.buttonClick} />
                </ButtonItem>
            </Form>
        );
    }

    buttonClick(e) {
        // ...
    }
}

export default App;

View Demo

See Also