DevExtreme Vue - Widget Options

To change the Form configuration at runtime, call the option(optionName, optionValue) method. 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 Form',
        value: false,
        onValueChanged: function (e) {
            form.option("disabled", e.value);
        }
    });
});

With Angular, bind the option to change to a component or element property.

HTML
TypeScript
<dx-form
    [(formData)]="employee"
    [disabled]="disableForm.value">
</dx-form>
<dx-check-box #disableForm
    text="Disable the Form"
    [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