Vue Form Props
See Also
accessKey
The value of this property will be passed to the accesskey
attribute of the HTML element that underlies the UI component.
activeStateEnabled
The UI component switches to the active state when users press down the primary mouse button. When this property is set to true, the CSS rules for the active state apply. You can change these rules to customize the component.
Use this property when you display the component on a platform whose guidelines include the active state change for UI components.
alignItemLabels
Specifies whether all item labels are aligned. Applies only to labels outside their editors (see labelMode).
alignItemLabelsInAllGroups
Specifies whether item labels in all groups are aligned. Applies only to labels outside their editors (see labelMode).
colCount
See Also
colCountByScreen
The following code sample illustrates how to set this property:
jQuery
$(function() { $("#formContainer").dxForm({ // ... colCountByScreen: { xs: 2 } }); });
Angular
<dx-form ... > <dxo-col-count-by-screen [xs]="2"></dxo-col-count-by-screen> </dx-form>
import { DxFormModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxFormModule ], // ... })
Vue
<template> <DxForm ...> <DxColCountByScreen :xs="2"/> </DxForm> </template> <script> import DxForm, { DxColCountByScreen } from 'devextreme-vue/form'; export default { components: { DxForm, DxColCountByScreen } } </script>
React
import React from 'react'; import Form, { ColCountByScreen } from 'devextreme-react/form'; const App = () => { return ( <Form ...> <ColCountByScreen xs={2} /> </Form> ); }; export default App;
customizeItem
If you did not define form items using the items property, the Form UI component creates them automatically according to the structure of an object passed to the formData property. The customizeItem property enables you to modify properties of each generated item before this item is rendered. Each generated item passed to this function as an argument has a Simple Item structure.
If the items property contains definition for form items, you usually do not need to pass a function to the customizeItem property because you can customize items before passing them to the items property. However, if you assign a function to this property, it will be called for each item. In this case, an item can have structure corresponding to one of the item types.
See Also
elementAttr
Specifies the global attributes to be attached to the UI component's container element.
jQuery
$(function(){ $("#formContainer").dxForm({ // ... elementAttr: { id: "elementId", class: "class-name" } }); });
Angular
<dx-form ... [elementAttr]="{ id: 'elementId', class: 'class-name' }"> </dx-form>
import { DxFormModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxFormModule ], // ... })
Vue
<template> <DxForm ... :element-attr="formAttributes"> </DxForm> </template> <script> import DxForm from 'devextreme-vue/form'; export default { components: { DxForm }, data() { return { formAttributes: { id: 'elementId', class: 'class-name' } } } } </script>
React
import React from 'react'; import Form from 'devextreme-react/form'; class App extends React.Component { formAttributes = { id: 'elementId', class: 'class-name' } render() { return ( <Form ... elementAttr={this.formAttributes}> </Form> ); } } export default App;
height
This property accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px"
,"20vh"
,"80%"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
items
Array<Simple Form Item | Group Form Item | Tabbed Form Item | Empty Form Item | Button Form Item>
labelLocation
Specifies the location of a label against the editor. Applies only to labels outside their editors (see labelMode).
labelMode
Specifies a display mode for item labels.
This property can have one of the following values:
labelMode | Description | Illustration |
---|---|---|
"static" | The label is displayed above the input field. | |
"floating" | The label is used as a placeholder, but when the editor gets focus, the label moves to the position above the input field. |
|
"hidden" | The label is hidden. | |
"outside" | The label is displayed outside the editor, and its position depends on the following properties: |
This property specifies a display mode for all item labels. If you want to override the mode for an individual label, specify the labelMode property within editorOptions.
Please review the following notes:
The following editors do not support "static" and "floating" modes and will default to "outside" mode:
- "dxCalendar"
- "dxCheckBox"
- "dxHtmlEditor"
- "dxRadioGroup"
- "dxRangeSlider"
- "dxSlider"
- "dxSwitch"
If autofill is enabled in the browser, we do not recommend that you use "floating" mode. The autofill values will overlap the label when it is displayed as a placeholder. Use "static" mode instead.
minColWidth
The minimum column width used for calculating column count in the form layout. Applies only if colCount property is "auto".
onContentReady
A function that is executed when the UI component is rendered and each time the component is repainted.
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model | any |
Model data. Available only when using Knockout. |
onDisposing
A function that is executed before the UI component is disposed of.
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model | any |
Model data. Available only if you use Knockout. |
onEditorEnterKey
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
dataField |
The path to the formData object field associated with the current editor. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model | any |
Model data. Available only if Knockout is used. |
onFieldDataChanged
A function that is executed when the value of a formData object field is changed.
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
dataField |
The path to the formData object field whose value has been changed. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model | any |
Model data. Available only if Knockout is used. |
value |
The field's new value. |
onInitialized
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
See Also
jQuery
Angular
Vue
React
onOptionChanged
Name | Type | Description |
---|---|---|
model | any |
Model data. Available only if you use Knockout. |
fullName |
The path to the modified property that includes all parent properties. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
|
name |
The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into. |
|
value | any |
The modified property's new value. |
previousValue | any |
The UI component's previous value. |
The following example shows how to subscribe to component property changes:
jQuery
$(function() { $("#formContainer").dxForm({ // ... onOptionChanged: function(e) { if(e.name === "changedProperty") { // handle the property change here } } }); });
Angular
<dx-form ... (onOptionChanged)="handlePropertyChange($event)"> </dx-form>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // ... handlePropertyChange(e) { if(e.name === "changedProperty") { // handle the property change here } } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxFormModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxFormModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
<template> <DxForm ... @option-changed="handlePropertyChange" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxForm from 'devextreme-vue/form'; export default { components: { DxForm }, // ... methods: { handlePropertyChange: function(e) { if(e.name === "changedProperty") { // handle the property change here } } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import Form from 'devextreme-react/form'; const handlePropertyChange = (e) => { if(e.name === "changedProperty") { // handle the property change here } } export default function App() { return ( <Form ... onOptionChanged={handlePropertyChange} /> ); }
optionalMark
The text displayed for optional fields. Applies only if showOptionalMark is true.
See Also
readOnly
Specifies whether all editors on the form are read-only. Applies only to non-templated items.
rtlEnabled
When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.
DevExpress.config({ rtlEnabled: true });
screenByWidth
The UI component uses the following size qualifiers to categorize screens by width:
Size Qualifier | Description |
---|---|
xs | Stands for "extra small". Screens with width less than 768 pixels. |
sm | Stands for "small". Screens with width between 768 and 992 pixels. |
md | Stands for "medium". Screens with width between 992 and 1200 pixels. |
lg | Stands for "large". Screens with width more than 1200 pixels. |
Implement the screenByWidth function to change the relation between a size qualifier and screen width. This function accepts the screen width and should return a size qualifier. The following code shows the function's default implementation that you can customize:
jQuery
$(function() { $("#formContainer").dxForm({ // ... screenByWidth: function(width) { if (width < 768) return "xs"; if (width < 992) return "sm"; if (width < 1200) return "md"; return "lg"; } }); });
Angular
import { DxFormModule } from "devextreme-angular"; // ... export class AppComponent { // ... getSizeQualifier(width) { if (width < 768) return "xs"; if (width < 992) return "sm"; if (width < 1200) return "md"; return "lg"; } } @NgModule({ imports: [ // ... DxFormModule ], // ... })
<dx-form ... [screenByWidth]="getSizeQualifier"> </dx-form>
Vue
<template> <DxForm ... :screen-by-width="getSizeQualifier"> <!-- ... --> </DxForm> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxForm, { // ... } from 'devextreme-vue/form'; export default { components: { DxForm, // ... }, // ... methods: { getSizeQualifier(width) { if (width < 768) return "xs"; if (width < 992) return "sm"; if (width < 1200) return "md"; return "lg"; } } } </script>
React
import 'devextreme/dist/css/dx.light.css'; import Form, { // ... } from 'devextreme-react/form'; const getSizeQualifier = (width) => { if (width < 768) return "xs"; if (width < 992) return "sm"; if (width < 1200) return "md"; return "lg"; }; export default function App() { return ( <Form ... screenByWidth={getSizeQualifier}> {/* ... */} </Form> ); }
showColonAfterLabel
Specifies whether a colon is displayed at the end of form labels. Applies only to labels outside their editors (see labelMode).
tabIndex
The value of this property will be passed to the tabindex
attribute of the HTML element that underlies the UI component.
validationGroup
In some cases, the Form editors should be validated by the Button UI component. Editors are collected in an unnamed validation group that makes it impossible for the Button to validate them. In this case, use the validationGroup property of the Form UI component to give this validation group a name. Also, pass the same name to the validationGroup property of the Button UI component.
jQuery
$(function () { $("#formContainer").dxForm({ // ... validationGroup: "groupName" }); $("#buttonContainer").dxButton({ // ... validationGroup: "groupName", onClick: function (e) { e.validationGroup.validate(); } }); })
width
This property accepts a value of one of the following types:
Number
The width in pixels.String
A CSS-accepted measurement of width. For example,"55px"
,"20vw"
,"80%"
,"auto"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
Even if the width of the UI component is specified, the count of columns may depend on the screen width. For example, if the screen width is not enough to display the whole form's container, the count of columns depends on the screen width, not the container. To always use a fixed count of columns regardless of the screen width, pass an empty function to the screenByWidth property.
screenByWidth: function() { }
If you have technical questions, please create a support ticket in the DevExpress Support Center.