Angular 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;
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.