JavaScript/jQuery Form Options

Default Value: undefined

The value of this property will be passed to the accesskey attribute of the HTML element that underlies the UI component.

activeStateEnabled

Specifies whether the UI component changes its visual state as a result of user interaction.

Type:

Default Value: false

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).

Type:

Default Value: true

alignItemLabelsInAllGroups

Specifies whether item labels in all groups are aligned. Applies only to labels outside their editors (see labelMode).

Type:

Default Value: true

NOTE

This property applies only to those simple items that are nested within a group item. Thus, we recommend that you do not leave any simple items ungrouped if you need a consistent alignment throughout the Form.

colCount

The count of columns in the form layout.

Type:

Number

|

Mode

Default Value: 1

NOTE

For extra small screens, this property always equals 1 to make the UI component adaptive. To override this logic, specify the colCountByScreen property.

colCountByScreen

Specifies dependency between the screen factor and the count of columns in the form layout.

Type:

Object

Default Value: undefined

The following code sample illustrates how to set this property:

jQuery

JavaScript

$(function() {
    $("#formContainer").dxForm({
        // ...
        colCountByScreen: {
            xs: 2
        }
    });
});

Angular

HTML

TypeScript

<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

App.vue

<template>
    <DxForm ...>
        <DxColCountByScreen :xs="2"/>
    </DxForm>
</template>
<script>
import DxForm, { DxColCountByScreen } from 'devextreme-vue/form';

export default {
    components: {
        DxForm,
        DxColCountByScreen
    }
}
</script>

React

App.js

import React from 'react';
import Form, { ColCountByScreen } from 'devextreme-react/form';

const App = () => {
    return (
        <Form ...>
            <ColCountByScreen xs={2} />
        </Form>
    );
};

export default App;

customizeItem

Specifies a function that customizes a form item after it has been created.

Type:

Function parameters:

item:

|

|

|

|

The item's object.

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.

disabled

Specifies whether the UI component responds to user interaction.

Type:

Default Value: false

elementAttr

Specifies the global attributes to be attached to the UI component's container element.

Type:

Object

Default Value: {}

jQuery

$(function(){
    $("#formContainer").dxForm({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

Angular

HTML

TypeScript

<dx-form ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-form>

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

Vue

App.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

App.js

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;

focusStateEnabled

Specifies whether the UI component can be focused using keyboard navigation.

Type:

Default Value: false

formData

Provides the Form's data. Gets updated every time form fields change.

Type: any

Default Value: {}

Raised Events: onFieldDataChanged

height

Specifies the UI component's height.

Type:

|

|

Return Value:

|

The UI component's height.

Default Value: undefined

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.

hint

Specifies text for a hint that appears when a user pauses on the UI component.

Type:

Default Value: undefined

hoverStateEnabled

Specifies whether the UI component changes its state when a user pauses on it.

Type:

Default Value: false

isDirty

Specifies whether current editor values differ from initial values.

Type:

Default Value: false

This property is a read-only flag. You can use it to check if any editor value changed on this Form.

NOTE

Specify the dataField of each Form item for this property to take effect.
If you use DateBox or DateRangeBox as a Form item, and users enter invalid dates, the isDirty value does not change.
This property works only for predefined editors and does not work with custom templates.

Overview Demo Customize Fields at Runtime Demo

items

Holds an array of form items.

Type:

Array<Simple Form Item | Group Form Item | Tabbed Form Item | Empty Form Item | Button Form Item>

Default Value: undefined

labelLocation

Specifies the location of a label against the editor. Applies only to labels outside their editors (see labelMode).

Type:

LabelLocation

Default Value: 'left', 'top' (Fluent, Material)

labelMode

Specifies a display mode for item labels.

Type:

FormLabelMode

Default Value: 'outside'

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: labelLocation items[].label.location alignItemLabels alignItemLabelsInAllGroups items[].label.alignment

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.

NOTE

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".

Type:

Number

Default Value: 200

NOTE

The actual column width equals the UI component width divided by the column count.

onContentReady

A function that is executed when the UI component is rendered and each time the component is repainted.

Type:

Function parameters:

e:

ContentReadyEvent

Information about the event.

Object structure:

Name	Type	Description
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Form	The UI component's instance.

Name

Type

Description

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.

Default Value: null

onDisposing

A function that is executed before the UI component is disposed of.

Type:

Function parameters:

e:

DisposingEvent

Information about the event.

Object structure:

Name	Type	Description
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Form	The UI component's instance.

Name

Type

Description

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.

Default Value: null

onEditorEnterKey

A function that is executed when the Enter key has been pressed while an editor is focused.

Type:

Function parameters:

e:

EditorEnterKeyEvent

Information about the event.

Object structure:

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.

Default Value: null

IMPORTANT

This function is executed only if the editor raises the enterKey event. See the Events section in the editor's API reference for the list of events the editor can raise. If the enterKey event is absent from the list, but you need to handle the Enter key press, use another editor.

onFieldDataChanged

A function that is executed when the value of a formData object field is changed.

Type:

Function parameters:

e:

FieldDataChangedEvent

Information about the event.

Object structure:

Name	Type	Description
component	Form	The UI component's instance.
dataField	String	The path to the formData object field whose value has been changed.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
value	Object	The field's new value.

Default Value: null

View on GitHub

onInitialized

A function used in JavaScript frameworks to save the UI component instance.

Type:

Function parameters:

e:

InitializedEvent

Information about the event.

Object structure:

Name	Type	Description
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Form	The UI component's instance.

Name

Type

Description

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.

Default Value: null

Angular

app.component.html

app.component.ts

<dx-form ...
    (onInitialized)="saveInstance($event)">
</dx-form>

import { Component } from "@angular/core";
import Form from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    formInstance: Form;
    saveInstance (e) {
        this.formInstance = e.component;
    }
}

Vue

App.vue (Options API)

App.vue (Composition API)

<template>
    <div>
        <DxForm ...
            @initialized="saveInstance">
        </DxForm>
    </div>
</template>

<script>
import DxForm from 'devextreme-vue/form';

export default {
    components: {
        DxForm
    },
    data: function() {
        return {
            formInstance: null
        };
    },
    methods: {
        saveInstance: function(e) {
            this.formInstance = e.component;
        }
    }
};
</script>

<template>
    <div>
        <DxForm ...
            @initialized="saveInstance">
        </DxForm>
    </div>
</template>

<script setup>
import DxForm from 'devextreme-vue/form';

let formInstance = null;

const saveInstance = (e) => {
    formInstance = e.component;
}
</script>

React

App.js

import Form from 'devextreme-react/form';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.formInstance = e.component;
    }

    render() {
        return (
            <div>
                <Form onInitialized={this.saveInstance} />
            </div>
        );
    }
}

jQuery

Get a UI component Instance in jQuery

Angular

Get a UI component Instance in Angular

Vue

Get a UI component Instance in Vue

React

Get a UI component Instance in React

onOptionChanged

A function that is executed after a UI component property is changed.

Type:

Function parameters:

e:

OptionChangedEvent

Information about the event.

Object structure:

Name	Type	Description
value	any	The modified property's new value.
previousValue	any	The UI component's previous value.
name	String	The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.
fullName	String	The path to the modified property that includes all parent properties.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Form	The UI component's instance.

Default Value: null

The following example shows how to subscribe to component property changes:

jQuery

index.js

$(function() {
    $("#formContainer").dxForm({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<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

App.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

App.js

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.

Type:

Default Value: 'optional'

NOTE

In "static" or "floating" labelMode, form items use the optionalMark property value as help text if the helpText property is not specified.

readOnly

Specifies whether all editors on the form are read-only. Applies only to non-templated items.

Type:

Default Value: false

NOTE

Item editor options override general Form parameters. For example, if you set readOnly to true for one of the Form editors, it will be read-only while Form is not.

requiredMark

The text displayed for required fields.

Type:

Default Value: '*'

requiredMessage

Specifies the message that is shown for end-users if a required field value is not specified.

Type:

Default Value: '{0} is required'

rtlEnabled

Switches the UI component to a right-to-left representation.

Type:

DataGrid Demo Navigation UI Demo Editors Demo

Default Value: false

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.

JavaScript

DevExpress.config({
    rtlEnabled: true
});

screenByWidth

Specifies a function that categorizes screens by their width.

Type:

Default Value: null

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

JavaScript

$(function() {
    $("#formContainer").dxForm({
        // ...
        screenByWidth: function(width) {
            if (width < 768) return "xs";
            if (width < 992) return "sm";
            if (width < 1200) return "md";
            return "lg";
        }
    });
});

Angular

TypeScript

HTML

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

App.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

App.js

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>
    );
}

scrollingEnabled

A Boolean value specifying whether to enable or disable form scrolling.

Type:

Default Value: false

showColonAfterLabel

Specifies whether a colon is displayed at the end of form labels. Applies only to labels outside their editors (see labelMode).

Type:

Default Value: true, false (Material)

showOptionalMark

Specifies whether or not the optional mark is displayed for optional fields.

Type:

Default Value: false

showRequiredMark

Specifies whether or not the required mark is displayed for required fields.

Type:

Default Value: true

showValidationSummary

Specifies whether or not the total validation summary is displayed on the form.

Type:

Default Value: false

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Type:

Number

Default Value: 0

The value of this property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

validationGroup

Gives a name to the internal validation group.

Type:

Default Value: undefined

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();
        }
    });
})

NOTE

Form is not designed to work with validationGroup shared with other components. When a Form is disposed of, it disposes of the associated validationGroup object and other components fail with an error.

View on GitHub

visible

Specifies whether the UI component is visible.

Type:

Default Value: true

width

Specifies the UI component's width.

Type:

|

|

Return Value:

|

The UI component's width.

Default Value: undefined

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.