Free Trial Buy

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
    ],
    // ...
})
See Also