JavaScript/jQuery Form - Item Properties

jQuery

To change a single item property at runtime, call the itemOption(id, option, 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" 
            });
        }
    });
});
Angular

To change an item property at runtime, bind the property that should be changed to a component property:

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

To change an item property at runtime, bind the property that should be changed to a component property:

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

To change an item property at runtime, bind the property that should be changed to a state property:

App.js
import React from 'react';

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.

NOTE
When you call this method, Form rerenders the layout. As a result, all editors are re-initialized and their settings return to the initial editorOptions configuration.
See Also
jQuery
Angular
Vue
React