Angular Form - Editor Properties

jQuery

To change the properties of an editor, get its instance first using the getEditor(dataField) method. After that, call the option(optionName, optionValue) or option(optionName, options) method of this instance. This approach is more typical of jQuery.

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

    $("#checkBoxContainer").dxCheckBox({
        text: 'Disable the First Name Editor',
        value: false,
        onValueChanged: function (e) {
            form.getEditor("firstName")
                .option("disabled", e.value);
        }
    });
});
NOTE
The getEditor(dataField) method is available for visible form items only.
Angular

To change the properties of an editor, bind the property that should be changed in the editorOptions object to a component property.

HTML
TypeScript
<dx-form
    [(formData)]="employee">
    <dxi-item dataField="firstName" [editorOptions]="{ disabled: disableFirstName.value }"></dxi-item>
    <dxi-item dataField="lastName"></dxi-item>
    <dxi-item dataField="phone"></dxi-item>
    <dxi-item dataField="email"></dxi-item>
</dx-form>
<dx-check-box #disableFirstName
    text="Disable the First Name Editor"
    [value]="false">
</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 the properties of an editor, bind the property that should be changed in the editorOptions object to a component property.

App.vue
<template>
    <div>
        <DxForm :form-data="employee">
            <DxSimpleItem data-field="firstName" :editor-options="editorOptions" />
            <DxSimpleItem data-field="lastName" />
            <DxSimpleItem data-field="phone" />
            <DxSimpleItem data-field="email" />
        </DxForm>
        <DxCheckBox
            text="Disable the First Name Editor"
            :value="editorOptions.disabled"
            @value-changed="checkBoxValueChanged" />
    </div>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxSimpleItem } 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, DxCheckBox
    },
    data() {
        return {
            employee,
            editorOptions: {
                disabled: false
            }
        };
    },
    methods: {
        checkBoxValueChanged(e) {
            this.editorOptions = { disabled: e.value };
        }
    }
};
</script>
React

To change the properties of an editor, bind the property that should be changed in the editorOptions object to a state property.

App.js
import React from 'react';

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

import { Form, SimpleItem } 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 = {
            editorOptions: {
                disabled: false
            }
        };
        this.onCheckBoxValueChanged = this.onCheckBoxValueChanged.bind(this);
    };

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

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

export default App;
See Also
jQuery
Angular
Vue
React