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.

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 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.

JavaScript
$(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.

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
    ],
    // ...
})
See Also