Vue Form - Form Properties

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, Vue, or React, bind the property that should be changed to a component property.

Angular
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
    ],
    // ...
})
Vue
App.vue
<template>
    <div>
        <DxForm
            :form-data="employee"
            :disabled="isFormDisabled" />
        <DxCheckBox
            text="Disable the Form"
            :value.sync="isFormDisabled" />
    </div>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxForm } 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, DxCheckBox
    },
    data() {
        return {
            employee,
            isFormDisabled: false
        };
    },
};
</script>
React
App.js
import React from 'react';

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

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

    render() {
        return (
            <div>
                <Form
                    formData={employee}
                    disabled={this.state.isFormDisabled} />
                <CheckBox
                    text="Disable the Form"
                    value={this.state.isFormDisabled}
                    onValueChanged={this.onCheckBoxValueChanged} />
            </div>
        );
    }

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

export default App;
See Also