Angular Form - 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.
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
When using ASP.NET MVC Controls, configure the editor in the following manner.
@(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) )
See Also
editorType
When using ASP.NET MVC Controls, configure the editor in the following manner.
@(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
The structure of the form item object depends on the value of this option.
This article describes the structure of an item whose type is "simple". The following item types are also available.
group
Group item is a section consisting of a caption and child form items. You can customize the layout options for each group separately.tabbed
Tabbed item is a tabbed panel whose tabs contain child form items. You can customize the layout options for each tab separately.empty
Empty item is an empty span between neighboring items. You can specify the number of columns spanned by an empty item.
name
Use the name instead of the data field to access unbound simple items in methods like getEditor(dataField), itemOption(id), etc.
validationRules
Array<RequiredRule | NumericRule | RangeRule | StringLengthRule | CustomRule | CompareRule | PatternRule | EmailRule>
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.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.