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"
v-model:value="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
- Get and Set Properties - jQuery
- Change Options: Angular | AngularJS | Knockout
- Form Demos
- Form API Reference
Feedback