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.

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