Customize Item

import React from 'react'; import 'devextreme-react/text-area'; import Form, { Item } from 'devextreme-react/form'; import service from './data.js'; class App extends React.Component { constructor(props) { super(props); this.employee = service.getEmployee(); this.positions = service.getPositions(); this.rules = { 'X': /[02-9]/ }; this.validationRules = { position: [ { type: 'required', message: 'Position is required.' }, ], hireDate: [ { type: 'required', message: 'Hire Date is required.' } ] }; this.validateForm = (e) => { e.component.validate(); }; } render() { return ( <React.Fragment> <div className={'long-title'}><h3>Employee Details</h3></div> <div className={'form-container'}> <Form onContentReady={this.validateForm} colCount={2} id={'form'} formData={this.employee}> <Item dataField={'FirstName'} editorOptions={{ disabled: true }} /> <Item dataField={'Position'} editorType={'dxSelectBox'} editorOptions={{ items: this.positions, value: '' }} validationRules={this.validationRules.position} /> <Item dataField={'LastName'} editorOptions={{ disabled: true }} /> <Item dataField={'HireDate'} editorType={'dxDateBox'} editorOptions={{ width: '100%', value: null }} validationRules={this.validationRules.hireDate} /> <Item dataField={'BirthDate'} editorType={'dxDateBox'} editorOptions={{ width: '100%', disabled: true }} /> <Item dataField={'Address'} /> <Item dataField={'Notes'} colSpan={2} editorType={'dxTextArea'} editorOptions={{ height: 90 }} /> <Item dataField={'Phone'} editorOptions={{ mask: '+1 (X00) 000-0000', maskRules: this.rules }} /> <Item dataField={'Email'} /> </Form> </div> </React.Fragment> ); } } export default App;