DevExtreme Angular - Add a Button

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

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
    ],
    // ...
})

View Demo

See Also