Form items in DataForm component

31 May 202412 minutes to read

The FormItem can be utilized to set up various configuration for the editor component, including the unique identifier (id), the type of editor component used, any additional CSS classes to be applied to the editor, and whether the field is to be active (enabled) or inactive (disabled) upon being rendered.The below example showcases the different property usages.

Configuring the model field and ID

The Field property is used to map the model field to the corresponding editor component. The ID property is used to set the unique identifier for the editor component.

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations

<SfDataForm ID="MyForm"
            Model="@EventRegistrationModel">
    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>
    <FormItems>
        <FormItem Field="@nameof(EventRegistration.Name)" ID="firstname"></FormItem>
        <FormItem Field="@nameof(EventRegistration.Email)" ID="email"></FormItem>
    </FormItems>
</SfDataForm>
   

@code {
    private EventRegistration EventRegistrationModel = new EventRegistration();
}
public class EventRegistration
{
    [Required(ErrorMessage = "Please enter your name.")]
    [Display(Name = "Name")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Please enter your email address.")]
    [Display(Name = "Email ID")]
    public string Email { get; set; }
}

Blazor DataForm Form Item

Set the placeholder

The Placeholder property is used to set the placeholder text for the editor component.

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations

<SfDataForm ID="MyForm"
            Width="50%"
            Model="@EventRegistrationModel">
    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>
    <FormItems>
        <FormItem Field="@nameof(EventRegistration.Name)" Placeholder="e.g. Andrew Fuller"></FormItem>
        <FormItem Field="@nameof(EventRegistration.Email)" Placeholder="e.g. someone@example.com"></FormItem>
    </FormItems>
</SfDataForm>


@code {
    private EventRegistration EventRegistrationModel = new EventRegistration();
}
public class EventRegistration
    {
        [Required(ErrorMessage = "Please enter your name.")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please enter your email address.")]
        public string Email { get; set; }
    }

DataForm Placeholder

Change the editor type

The EditorType property is used to set the editor type for the corresponding field.We can assign the editor type using the FormEditorType enumeration.

Field Type Supported Editor types
string TextBox,TextArea,Password
int , float, decimal,double,long NumericTextBox
bool CheckBox,Switch
DateTime DatePicker,DateTimePicker,TimePicker
enum DropDownList,ComboBox,AutoComplete
DateOnly DatePicker
TimeOnly TimePicker 
@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations


<SfDataForm ID="MyForm"
            Model="@EditorTypeModel"
            Width="50%"
            AutoComplete="on">

    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>

    <FormItems>
        <FormItem Field="@nameof(EditorTypeModel.NumericTextBoxField)" ID="numeric-textbox" Placeholder="Enter the value" LabelText="Numeric TextBox Editor"></FormItem>
        <FormItem Field="@nameof(EditorTypeModel.TextBoxField)" ID="textbox" Placeholder="Enter the value" LabelText="TextBox Editor"></FormItem>
        <FormItem Field="@nameof(EditorTypeModel.DisabledTextBoxField)" ID="diabled" IsEnabled="false" Placeholder="Enter the value" LabelText="TextBox Editor"></FormItem>
        <FormItem Field="@nameof(EditorTypeModel.TextAreaField)" CssClass="e-warning" LabelText="TextArea Editor" Placeholder="Enter the value" EditorType="FormEditorType.TextArea"></FormItem>
        <FormItem Field="@nameof(EditorTypeModel.DropDownListField)" LabelText="DropDownList Editor" CssClass="e-warning" Placeholder="Select the value" EditorType="FormEditorType.DropDownList"></FormItem>
        <FormItem Field="@nameof(EditorTypeModel.AutoCompleteField)" LabelText="AutoComplete Editor" Placeholder="Select the value" EditorType="FormEditorType.AutoComplete"></FormItem>
        <FormItem Field="@nameof(EditorTypeModel.ComboBoxField)" LabelText="ComboBox Editor" Placeholder="Select the value" EditorType="FormEditorType.ComboBox"></FormItem>
        <FormItem Field="@nameof(EditorTypeModel.PasswordField)" LabelText="Password Editor" Placeholder="Enter the value" EditorType="FormEditorType.Password"></FormItem>
        <FormItem Field="@nameof(EditorTypeModel.DateTimePickerField)" LabelText="DateTimePicker Editor" Placeholder="Enter the value" EditorType="FormEditorType.DateTimePicker"></FormItem>
        <FormItem Field="@nameof(EditorTypeModel.DatePickerField)" LabelText="DatePicker Editor" Placeholder="Enter the value" EditorType="FormEditorType.DatePicker"></FormItem>
        <FormItem Field="@nameof(EditorTypeModel.TimePickerField)" LabelText="TimePicker Editor" Placeholder="Enter the value" EditorType="FormEditorType.TimePicker"></FormItem>
        <FormItem Field="@nameof(EditorTypeModel.CheckBoxField)" LabelText="Checkbox Editor"></FormItem>
        <FormItem Field="@nameof(EditorTypeModel.SwitchField)" LabelText="Switch Editor" EditorType="FormEditorType.Switch"></FormItem>
    </FormItems>
</SfDataForm>


@code {
    private EditorTypes EditorTypeModel = new EditorTypes();
}
public enum Countries
{
    Australia,
    Bermuda,
    Canada
}

public class EditorTypes
{
    [Required(ErrorMessage = "Please enter a value for NumericTextBoxField")]
    public int? NumericTextBoxField { get; set; }

    [Required(ErrorMessage = "Please enter a value for TextBoxField")]
    public string TextBoxField { get; set; }

    [Required(ErrorMessage = "Please enter a value for TextBoxField")]
    public string DisabledTextBoxField { get; set; }

    [Required(ErrorMessage = "Please enter a value for TextAreaField")]
    public string TextAreaField { get; set; }

    [Required(ErrorMessage = "Please select a value for DropDownListField")]
    public Countries DropDownListField { get; set; }

    [Required(ErrorMessage = "Please enter a value for AutoCompleteField")]
    public Countries AutoCompleteField { get; set; }

    [Required(ErrorMessage = "Please select a value for ComboBoxField")]
    public Countries ComboBoxField { get; set; }

    [Required(ErrorMessage = "Please enter a value for PasswordField")]
    public string PasswordField { get; set; }

    [Required(ErrorMessage = "Please select a date for DateTimePickerField")]
    public DateTime? DateTimePickerField { get; set; }

    [Required(ErrorMessage = "Please select a date for DatePickerField")]
    public DateTime? DatePickerField { get; set; }

    [Required(ErrorMessage = "Please select a time for TimePickerField")]
    public DateTime? TimePickerField { get; set; }

    [Required(ErrorMessage = "Please check the CheckBoxField")]
    [Range(typeof(bool), "true", "true", ErrorMessage = "CheckBoxField must be checked")]
    public bool CheckBoxField { get; set; }

    [Required(ErrorMessage = "Please toggle the SwitchField")]
    [Range(typeof(bool), "true", "true", ErrorMessage = "SwitchField must be toggled")]
    public bool SwitchField { get; set; }
}

Blazor DataForm Form Item

Disable the editor

The IsEnabled property is used to disable the specific form item.

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations

<SfDataForm ID="MyForm"
            Model="@EventRegistrationModel">
    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>
    <FormItems>
        <FormItem Field="@nameof(EventRegistration.ID)" IsEnabled="false"></FormItem>
        <FormItem Field="@nameof(EventRegistration.Name)"></FormItem>
        <FormItem Field="@nameof(EventRegistration.Email)"></FormItem>
    </FormItems>
</SfDataForm>


@code {
    private EventRegistration EventRegistrationModel = new EventRegistration()
        {
            ID = "1001"
        };
}
public class EventRegistration
{
    public string ID { get; set; }
    [Required(ErrorMessage = "Name is required")]
    public string Name { get; set; }
    [Required(ErrorMessage = "Email is required")]
    [EmailAddress(ErrorMessage = "Invalid Email Address")]
    public string Email { get; set; }
}

Blazor DataForm Form Item

Change the label name

The Label property is used to set the label text for the editor component , At default Name property of the Display attribute will be used as label text.

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations

<SfDataForm ID="MyForm"
            Width="50%"
            Model="@EventRegistrationModel">
    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>
    <FormItems>
        <FormItem Field="@nameof(EventRegistration.Name)" Placeholder="e.g. Andrew Fuller" LabelText="Name as per your ID"></FormItem>
        <FormItem Field="@nameof(EventRegistration.Email)" Placeholder="e.g. someone@example.com" LabelText="Email address"></FormItem>
    </FormItems>
</SfDataForm>


@code {
    private EventRegistration EventRegistrationModel = new EventRegistration();
}
public class EventRegistration
{
    [Required(ErrorMessage = "Please enter your name.")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Please enter your email address.")]
    public string Email { get; set; }
}

DataForm Placeholder

Change the appearance of the field editor

The CssClass property is used to change the appearance of the form item.The added css class will get added to the editor’s wrapper component , using that we can customize the appearance of the editor.

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations

<SfDataForm ID="MyForm"
            Model="@EventRegistrationModel">
    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>
    <FormItems>
        <FormItem Field="@nameof(EventRegistration.Name)" CssClass="e-warning"></FormItem>
        <FormItem Field="@nameof(EventRegistration.Email)"></FormItem>
    </FormItems>
    </SfDataForm>

@code {

    private EventRegistration EventRegistrationModel = new EventRegistration();
}
public class EventRegistration
{
    [Required(ErrorMessage = "Please enter your name.")]
    [Display(Name = "Name")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Please enter your email address.")]
    [Display(Name = "Email address")]
    public string Email { get; set; }
}

Blazor DataForm Form Item

See also

Customization of specific field editor