Vue Form - Editor Properties

To change the properties of an editor, bind the property that should be changed in the editorOptions object to a component property.

HTML
TypeScript
  • <dx-form
  • [(formData)]="employee">
  • <dxi-item dataField="firstName" [editorOptions]="{ disabled: disableFirstName.value }"></dxi-item>
  • <dxi-item dataField="lastName"></dxi-item>
  • <dxi-item dataField="phone"></dxi-item>
  • <dxi-item dataField="email"></dxi-item>
  • </dx-form>
  • <dx-check-box #disableFirstName
  • text="Disable the First Name Editor"
  • [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
  • ],
  • // ...
  • })
See Also