Angular 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
- Get and Set Properties - jQuery
- Change Properties: Angular | AngularJS | Knockout
- Form Demos
- Form API Reference
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.