SimpleItem
A simple form item is an editor-label pair usually bound to a formData object field used to display and modify this field.
You can also create a simple item without binding it to a formData field. For example, it can be a check box that allows a user to confirm his agreement to process entered data.
For detailed information on configuring simple items, see the Configure Simple Items topic.
component
An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
cssClass
In Form, you can customize the appearance of form items using CSS styles. To apply a style to an item, implement a CSS class, which may contain various properties, and assign the name of this class to the cssClass option of the item.
dataField
Specifies the path to the formData object field bound to the current form item.
editorOptions
editorOptions should contain the options of the DevExtreme editor specified in the editorType. Because of this dependency, editorOptions cannot be typed and are not implemented as nested configuration components in Angular, Vue, and React. In these frameworks, specify editorOptions with an object. We recommend that you declare the object outside the configuration component in Vue and React to prevent possible issues caused by unnecessary re-rendering.
Angular
<dx-form ... >
<dxi-item ...
editorType="dxDateBox"
[editorOptions]="{ width: '100%' }">
</dxi-item>
</dx-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFormModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxFormModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
<template>
<DxForm ... >
<DxSimpleItem ...
editor-type="dxDateBox"
:editor-options="dateBoxOptions"
/>
</DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DxForm, {
DxSimpleItem
} from 'devextreme-vue/form';
export default {
components: {
DxForm,
DxSimpleItem
},
data() {
return {
dateBoxOptions: { width: '100%'}
}
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import Form, {
SimpleItem
} from 'devextreme-react/form';
class App extends React.Component {
dateBoxOptions = { width: '100%' };
render() {
return (
<Form ... >
<SimpleItem ...
editorType="dxDateBox"
editorOptions={this.dateBoxOptions}
/>
</Form>
);
}
}
export default App;When using ASP.NET MVC 5 Controls or DevExtreme-Based ASP.NET Core Controls, configure editorOptions as follows:
@(Html.DevExtreme().Form()
.FormData(Model.Data)
.Items(items => {
items.AddSimple().DataField("EmployeeID")
// Instead of TextBox here can be any other supported editor
.Editor(e => e.TextBox()
.Placeholder("Type a text here...")
// ...
// other editor options go here
)
})
)@(Html.DevExtreme().Form() _
.FormData(Model.Data) _
.Items(Sub(items)
items.AddSimple().DataField("EmployeeID") _
.Editor(Function(e)
' Instead of TextBox here can be any other supported editor
Return e.TextBox() _
.Placeholder("Type a text here...") _
' ...
' other editor options go here
End Function)
End Sub)
)id and name attributes using the inputAttr option, they will be overwritten. The Form generates these attributes automatically and uses them for addressing the DOM elements.See Also
editorType
When using an ASP.NET MVC 5 Controls or DevExtreme-Based ASP.NET Core Controls, configure the editor as follows:
@(Html.DevExtreme().Form()
.FormData(Model.Data)
.Items(items => {
items.AddSimple().DataField("EmployeeID")
// Instead of CheckBox here can be any other supported editor
.Editor(e => e.CheckBox()
.Value(true)
// ...
// other editor options go here
)
})
)@(Html.DevExtreme().Form() _
.FormData(Model.Data) _
.Items(Sub(items)
items.AddSimple().DataField("EmployeeID") _
.Editor(Function(e)
' Instead of CheckBox here can be any other supported editor
Return e.CheckBox() _
.Value(True) _
' ...
' other editor options go here
End Function)
End Sub)
)See Also
isRequired
If you specify validation rules using the validationRules option, the isRequired option is ignored. In this case, use the Require validation rule instead.
jQuery
$(function() {
$("#formContainer").dxForm({
// ...
items: [{
// ...
validationRules: [
{ type: "required" }
]
},
// ...
]
});
});Angular
<dx-form ... >
<dxi-item ... >
<dxi-validation-rule type="required"></dxi-validation-rule>
</dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxFormModule
],
// ...
})See Also
itemType
name
Use the name instead of the data field to access unbound simple items in methods like getEditor(dataField), itemOption(id), etc.
render
An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
validationRules
Array<RequiredRule | NumericRule | RangeRule | StringLengthRule | CustomRule | CompareRule | PatternRule | EmailRule | AsyncRule>
There are several predefined rule types. Each rule type demands a specific set of rule options. Refer to the Validation Rules section of the Validator API reference to learn how to define rules of different types.