A newer version of this page is available. Switch to the current version.

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