jQuery Form - Item Properties
To change a single item property at runtime, call the itemOption(id, option, value) method. This approach is more typical of jQuery. If the needed item is in a group or in a tab, the field parameter should be given the group caption or tab title followed by the item's name. An example is shown below.
JavaScript
$(function() {
var form = $("#formContainer").dxForm({
formData: {
firstName: "John",
lastName: "Heart",
phone: "+1(213) 555-9392",
email: "jheart@dx-email.com"
},
items: ["firstName", "lastName", {
itemType: "group",
caption: "Contacts",
items: ["phone", "email"]
}]
}).dxForm("instance");
$("#checkBoxContainer").dxCheckBox({
text: 'Show the Phone Number',
value: true,
onValueChanged: function (e) {
form.itemOption("Contacts.phone", "visible", e.value);
}
});
});To change several properties at a time, pass an object to the itemOption(id, options) method. When you call it with the id parameter only, this method returns the current configuration of the specified form item.
JavaScript
$(function() {
// ...
$("#buttonContainer").dxButton({
text: 'Change the Phone Properties',
onClick: function () {
form.itemOption("Contacts.phone", {
isRequired: true,
helpText: "+1(111)111-1111"
});
}
});
});In Angular, Vue, or React, bind the property that should be changed to a component property.
Angular
HTML
TypeScript
<dx-form
[(formData)]="employee">
<dxi-item dataField="firstName"></dxi-item>
<dxi-item dataField="lastName"></dxi-item>
<dxi-item itemType="group" caption="Contacts">
<dxi-item dataField="phone" [visible]="showPhone.value"></dxi-item>
<dxi-item dataField="email"></dxi-item>
</dxi-item>
</dx-form>
<dx-check-box #showPhone
text="Show the Phone Number"
[value]="true">
</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">
<DxSimpleItem data-field="firstName" />
<DxSimpleItem data-field="lastName" />
<DxGroupItem caption="Contacts">
<DxSimpleItem data-field="phone" :visible="isPhoneVisible" />
<DxSimpleItem data-field="email" />
</DxGroupItem>
</DxForm>
<DxCheckBox
text="Show the Phone Number"
v-model:value="isPhoneVisible" />
</div>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxForm, DxSimpleItem, DxGroupItem } 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, DxSimpleItem, DxGroupItem, DxCheckBox
},
data() {
return {
employee,
isPhoneVisible: true
};
},
};
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { Form, SimpleItem, GroupItem } 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 = {
isPhoneVisible: true
};
this.onCheckBoxValueChanged = this.onCheckBoxValueChanged.bind(this);
};
render() {
return (
<div>
<Form formData={employee}>
<SimpleItem dataField="firstName" />
<SimpleItem dataField="lastName" />
<GroupItem caption="Contacts">
<SimpleItem dataField="phone" visible={this.state.isPhoneVisible} />
<SimpleItem dataField="email" />
</GroupItem>
</Form>
<CheckBox
text="Show the Phone Number"
value={this.state.isPhoneVisible}
onValueChanged={this.onCheckBoxValueChanged} />
</div>
);
}
onCheckBoxValueChanged(e) {
this.setState({
isPhoneVisible: e.value
});
}
}
export default App;When you modify an item, the Form also refreshes all other items in its group. If an item is not in a group, the whole Form is refreshed. To update only your chosen items, wrap them into a separate group.
See Also
Feedback