Vue Form - ButtonItem

Configures a button form item.

Type:

A button form item, as the name implies, consists of a button that does a custom action. You can customize the button's appearance and position on the form.

View Demo

buttonOptions

Configures the button.

Selector: button-options

Type:

Button Configuration

Default Value: undefined

See the Button configuration for properties that you can specify in this object.

jQuery

JavaScript

$(function() {
    $("#formContainer").dxForm({
        // ...
        items: [{
            itemType: "button",
            buttonOptions: {
                text: "Do Something",
                type: "success",
                onClick: function () {
                    // Implement your logic here
                }
            }
        }, 
        // ...
        ]
    });
});

Angular

HTML

TypeScript

<dx-form ...>
    <dxi-item
        itemType="button"
        [buttonOptions]="buttonOptions">
    </dxi-item>
</dx-form>

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    buttonOptions = {
        text: "Do Something",
        type: "success",
        onClick: function () {
            // Implement your logic here
        }
    };
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxForm ...>
        <DxItem
            :button-options="buttonOptions"
            item-type="button"
        />
    </DxForm>
</template>
<script>
import DxForm, { DxItem } from 'devextreme-vue/form';

export default {
    components: {
        DxForm,
        DxItem
    },
    data() {
        return {
            buttonOptions: {
                text: "Do Something",
                type: "success",
                onClick: function () {
                    // Handle the button click here
                }
            }
        };
    }
}
</script>

React

App.js

import React from 'react';
import Form, { Item } from 'devextreme-react/form';

const buttonOptions = {
    text: "Do Something",
    type: "success",
    onClick: function () {
        // Handle the button click here
    }
};

const App = () => {
    return (
        <Form>
            <Item itemType="button" buttonOptions={buttonOptions} />
        </Form>
    );
};    

export default App;

NOTE

In Angular and Vue, the nested component that configures the buttonOptions property does not support event bindings and two-way property bindings.

Validation Demo Customize Fields at Runtime Demo