DevExtreme Vue - Item Options
To change a single item option 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.
$(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 options at a time, pass an object to the itemOption(id, options) method. Being called with the field parameter only, this method returns the current configuration of the specified form item.
$(function() { // ... $("#buttonContainer").dxButton({ text: 'Change the Phone Options', onClick: function () { form.itemOption("Contacts.phone", { isRequired: true, helpText: "+1(111)111-1111" }); } }); });
With Angular, bind the option to change to a component or element property.
<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 ], // ... })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.