All docs
V20.2
21.1 (CTP)
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Item Properties

To change a single item property at runtime, call the itemOption(id, property, value) method. This approach is more typical of jQuery. If the needed item is in a group or in a tab, the field parameter should be given the group caption or tab title followed by the item's name. An example is shown below.

JavaScript
$(function() {
    var form = $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            phone: "+1(213) 555-9392",
            email: "jheart@dx-email.com"
        },
        items: ["firstName", "lastName", {
            itemType: "group",
            caption: "Contacts",
            items: ["phone", "email"]
        }]
    }).dxForm("instance");

    $("#checkBoxContainer").dxCheckBox({
        text: 'Show the Phone Number',
        value: true,
        onValueChanged: function (e) {
            form.itemOption("Contacts.phone", "visible", e.value);
        }
    });
});

To change several properties at a time, pass an object to the itemOption(id, options) method. When you call it with the id parameter only, this method returns the current configuration of the specified form item.

JavaScript
$(function() {
    // ...
    $("#buttonContainer").dxButton({
        text: 'Change the Phone Properties',
        onClick: function () {
            form.itemOption("Contacts.phone", {
                isRequired: true, 
                helpText: "+1(111)111-1111" 
            });
        }
    });
});

In Angular, Vue, or React, bind the property that should be changed to a component property.

Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee">
    <dxi-item dataField="firstName"></dxi-item>
    <dxi-item dataField="lastName"></dxi-item>
    <dxi-item itemType="group" caption="Contacts">
        <dxi-item dataField="phone" [visible]="showPhone.value"></dxi-item>
        <dxi-item dataField="email"></dxi-item>
    </dxi-item>
</dx-form>
<dx-check-box #showPhone
    text="Show the Phone Number"
    [value]="true">
</dx-check-box>
import { DxFormModule, DxCheckBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        phone: "+1(213) 555-9392",
        email: "jheart@dx-email.com"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule,
        DxCheckBoxModule
    ],
    // ...
})
Vue
App.vue
<template>
    <div>
        <DxForm :form-data="employee">
            <DxSimpleItem data-field="firstName" />
            <DxSimpleItem data-field="lastName" />
            <DxGroupItem caption="Contacts">
                <DxSimpleItem data-field="phone" :visible="isPhoneVisible" />
                <DxSimpleItem data-field="email" />
            </DxGroupItem>
        </DxForm>
        <DxCheckBox
            text="Show the Phone Number"
            v-model:value="isPhoneVisible" />
    </div>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxSimpleItem, DxGroupItem } from 'devextreme-vue/form';
import { DxCheckBox } from 'devextreme-vue/check-box';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

export default {
    components: {
        DxForm, DxSimpleItem, DxGroupItem, DxCheckBox
    },
    data() {
        return {
            employee,
            isPhoneVisible: true
        };
    },
};
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Form, SimpleItem, GroupItem } from 'devextreme-react/form';
import { CheckBox } from 'devextreme-react/check-box';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            isPhoneVisible: true
        };
        this.onCheckBoxValueChanged = this.onCheckBoxValueChanged.bind(this);
    };

    render() {
        return (
            <div>
                <Form formData={employee}>
                    <SimpleItem dataField="firstName" />
                    <SimpleItem dataField="lastName" />
                    <GroupItem caption="Contacts">
                        <SimpleItem dataField="phone" visible={this.state.isPhoneVisible} />
                        <SimpleItem dataField="email" />
                    </GroupItem>
                </Form>
                <CheckBox
                    text="Show the Phone Number"
                    value={this.state.isPhoneVisible}
                    onValueChanged={this.onCheckBoxValueChanged} />
            </div>
        );
    }

    onCheckBoxValueChanged(e) {
        this.setState({
            isPhoneVisible: e.value
        });            
    }
}

export default App;

When you modify an item, the Form also refreshes all other items in its group. If an item is not in a group, the whole Form is refreshed. To update only your chosen items, wrap them into a separate group.

See Also