DevExtreme Vue - Editor Options

To change the options 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.

With Angular, bind the option to change in the editorOptions object to a component or element 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
    ],
    // ...
})

DevExtreme Vue - Editor Options

See Also