Overview
DevExtreme Vue Form is a UI component for data editing that provides a customizable layout for arranging editors in columns, groups, and tabs. Best suitable editors are chosen automatically depending on the data type. You can use Vue syntax and techniques to instantiate and configure the Form or handle its events. In addition, the component supports prop validation and templates that use named slots. Find out more about DevExtreme Vue components.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<template>
<DxForm :form-data="formData">
<template #avatar-template="{}">
<div class="form-avatar"/>
</template>
<DxGroupItem
:col-count="4"
css-class="first-group"
>
<DxSimpleItem template="avatar-template"/>
<DxGroupItem :col-span="3">
<DxSimpleItem data-field="FirstName"/>
<DxSimpleItem data-field="LastName"/>
<DxSimpleItem
:editor-options="birthDateOptions"
data-field="BirthDate"
editor-type="dxDateBox"
/>
</DxGroupItem>
</DxGroupItem>
<DxGroupItem
:col-count="2"
css-class="second-group"
>
<DxGroupItem>
<DxSimpleItem data-field="Address"/>
<DxSimpleItem data-field="City"/>
<DxSimpleItem
:editor-options="positionOptions"
data-field="Position"
editor-type="dxSelectBox"
/>
</DxGroupItem>
<DxGroupItem>
<DxSimpleItem
:editor-options="stateOptions"
data-field="State"
editor-type="dxSelectBox"
/>
<DxSimpleItem data-field="ZipCode"/>
<DxSimpleItem
:editor-options="phoneOptions"
data-field="Mobile"
>
<DxLabel text="Phone"/>
</DxSimpleItem>
</DxGroupItem>
<DxSimpleItem
:col-span="2"
:editor-options="notesOptions"
data-field="Notes"
editor-type="dxTextArea"
/>
</DxGroupItem>
</DxForm>
</template>
<script>
import {
DxForm,
DxSimpleItem,
DxGroupItem,
DxLabel,
} from 'devextreme-vue/form';
import { DxTextArea } from 'devextreme-vue/text-area';
import { employee, positions, states } from './data.js';
export default {
components: {
DxForm,
DxTextArea,
DxGroupItem,
DxSimpleItem,
DxLabel,
},
data() {
return {
formData: employee,
birthDateOptions: { width: '100%' },
positionOptions: {
items: positions,
value: '',
},
stateOptions: {
items: states,
},
phoneOptions: { mask: '+1 (000) 000-0000' },
notesOptions: { height: 140 },
};
},
};
</script>
<style>
.first-group,
.second-group {
padding: 20px;
}
.second-group {
background-color: rgba(191, 191, 191, 0.15);
}
.form-avatar {
height: 128px;
width: 128px;
margin-right: 10px;
border: 1px solid #d2d3d5;
border-radius: 50%;
background-image: url("../../../../images/petersmith.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
</style>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html>
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.3/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"> </div>
</div>
</body>
</html>
export const employee = {
ID: 1,
FirstName: 'John',
LastName: 'Heart',
Position: 'CEO',
BirthDate: '1964/03/16',
HireDate: '1995/01/15',
Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAV as its CEO since 2003.\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
Address: '351 S Hill St.',
City: 'Los Angeles',
State: 'CA',
ZipCode: '90013',
Home: '555-684-1334',
Mobile: '555-684-1335',
Email: 'jheart@dx-email.com',
Skype: 'jheart_DX_skype',
};
export const positions = [
'HR Manager',
'IT Manager',
'Controller',
'CEO',
'Sales Manager',
'Support Manager',
'Shipping Manager',
];
export const states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.2.41/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@22.2.3/cjs',
'devextreme-vue': 'npm:devextreme-vue@22.2.3',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.18/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.65/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.37/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.7.1/standalone.js',
'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.js',
},
packages: {
'devextreme-vue': {
main: 'index.js',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);