Blazor Form Overview
The Form for Blazor allows you to generate a form based on your model and to manage customized forms. You can control the component through various parameters, achieve the desired layout by using the default editor or add custom ones, set the orientation and organize those editors in groups and columns.
The Form component is part of Telerik UI for Blazor, a
professional grade UI library with 100+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor Form
To use the Form component with a model:
Use the
TelerikForm
tag to add the component to your razor page.Provide an object to the
Model
parameter of the component or an EditContext class to theEditContext
parameter.Use the
<FormValidation>
tag and in it, provide a validator - like theDataAnnotationsValidator
that comes with the framework, to enable form validation.
@* Provide a model to the Telerik Form *@
@using System.ComponentModel.DataAnnotations
<TelerikForm Model="@person">
<FormValidation>
<DataAnnotationsValidator />
</FormValidation>
</TelerikForm>
@code {
public Person person = new Person();
public class Person
{
[Editable(false)]
public int Id { get; set; }
[Required]
[MaxLength(20, ErrorMessage = "The first name should be maximum 20 characters long")]
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Required]
[MaxLength(25, ErrorMessage = "The last name should be maximum 25 characters long")]
[Display(Name = "Last Name")]
public string LastName { get; set; }
[Required]
[Display(Name = "Date of Birth")]
public DateTime? DOB { get; set; }
}
}
@* Provide an EditContext to the TelerikForm *@
@using System.ComponentModel.DataAnnotations
<TelerikForm EditContext="@MyEditContext">
<FormValidation>
<DataAnnotationsValidator />
</FormValidation>
</TelerikForm>
@code {
public EditContext MyEditContext { get; set; }
public Person person = new Person();
protected override void OnInitialized()
{
MyEditContext = new EditContext(person);
}
public class Person
{
[Editable(false)]
public int Id { get; set; }
[Required]
[MaxLength(20, ErrorMessage = "The first name should be maximum 20 characters long")]
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Required]
[MaxLength(25, ErrorMessage = "The last name should be maximum 25 characters long")]
[Display(Name = "Last Name")]
public string LastName { get; set; }
[Required]
[Display(Name = "Date of Birth")]
public DateTime? DOB { get; set; }
}
}
Form Items
There are three ways to generate fields in the Blazor Form:
- Define FormItems manually.
- Allow the Form to automatically generate items.
- Combine the above two options.
The Form Items allow you customize the default editors. [See the FormItems article for more information....
Automatic Generation of Fields
The Telerik Form can generate editors for you based on the model fields. It can take them from both a Model
, or the EditContext
, whichever you provide to it. You can use data annotation attributes to validate the field values and customize the auto-generated form fields, for example set labels, visibility and editability.
The following data types are supported out-of-the box and they use the following default editors:
Data Type | Default Editor |
---|---|
string |
Telerik TextBox |
int , double , float , decimal
|
Telerik NumericTextBox |
Enum |
Telerik DropDownList |
DateTime |
Telerik DatePicker |
bool |
Telerik CheckBox |
Customize the Automatically Generated Field Editors
You can customize the automatically generated field editors by providing the EditorType
attribute, exposed on the <FormItem>
, or by using the FormItem Template. The EditorType
attribute accepts a member of the FormEditorType
enum:
Field data type | FormEditorType enum members |
---|---|
String |
FormEditorType.TextArea FormEditorType.TextBox
|
Boolean |
FormEditorType.CheckBox FormEditorType.Switch
|
DateTime |
FormEditorType.DatePicker FormEditorType.DateTimePicker FormEditorType.TimePicker
|
@* The usage of the EditorType parameter *@
@using System.ComponentModel.DataAnnotations
<TelerikForm Model="@person">
<FormValidation>
<DataAnnotationsValidator></DataAnnotationsValidator>
</FormValidation>
<FormItems>
<FormItem Field="@nameof(Person.Id)" LabelText="Id"></FormItem>
<FormItem Field="@nameof(Person.FirstName)"
EditorType="@FormEditorType.TextArea"
LabelText="First name">
</FormItem>
<FormItem Field="@nameof(Person.LastName)"
EditorType="@FormEditorType.TextArea"
LabelText="Last name">
</FormItem>
<FormItem Field="@nameof(Person.DOB)"
EditorType="@FormEditorType.DateTimePicker"
LabelText="Date of birth">
</FormItem>
</FormItems>
</TelerikForm>
@code {
public Person person = new Person();
public class Person
{
public int Id { get; set; } = 10;
public string FirstName { get; set; } = "John";
public string LastName { get; set; } = "Doe";
public DateTime DOB { get; set; } = DateTime.Today.AddYears(-20);
}
}
Data Annotation Attributes
The Telerik Form for Blazor supports validation through the <DataAnnotationsValidator />
. This allows you to take advantage of all validation attributes from the data annotation attributes list provided by .NET.
The Form also uses the the following attributes from the model:
[Display(Name = "Field Caption")]
- to get the title (caption) of the field name to render out as its label.[Display(AutoGenerateField = false)]
- to skip a class member and not create aFormItem
for it.[Editable(false)]
- to render the built-in editor as disabled so the user cannot change its value.
You can customize the editors further through the form items. Explicit settings you provide through the parameters will take precedence over data annotation attributes.
Form Parameters
Parameter | Type and Default value | Description |
---|---|---|
Model |
object |
The object bound to the Form. It will automatically create the EditContext and using the two together is not supported. |
EditContext |
EditContext |
The EditContext of the form. |
ValidationMessageType |
FormValidationMessageType enum ( Inline ) |
Defines the type of the Validation messages. See the Validation article for more information. |
Id |
string |
Sets an id attribute to the <form> element. It is possible to use it together with the Form parameter of a submit button. Set both parameters to the same string value. This allows submitting the form from a button, which is outside the form. |
Form Layout Customization
The Blazor Form exposes multiple parameters that allow you to customize its layout:
Parameter | Type and Default value | Description |
---|---|---|
Width |
string |
Controls the width of the Form. |
Columns |
int |
Defines the number of columns in the Form. See the Columns article for more information |
ColumnSpacing |
string |
Defines the amout of vertical space between the Columns. See the Columns article for more information. |
Orientation |
FormOrientation enum ( Vertical ) |
controls the orientation of the Form. See the Orientation article for more information. |
Styling and Appearance
The following parameters enable you to customize the appearance of the Blazor Form:
Parameter | Type | Description |
---|---|---|
Size |
Telerik.Blazor.ThemeConstants.Form.Size |
Adjust the size of the Form |
You can find more information for customizing the Form appearance in the Appearance article.
Form Reference
Use the Form reference to get access to its EditContext
. The Form generates this object, no matter if the component uses a Model
or an EditContext
parameter. You can validate the EditContext
manually or re-attach validation when you change the model - FormReference.EditContext.AddDataAnnotationsValidation()
.
Get a reference to the Telerik Form for Blazor
@using System.ComponentModel.DataAnnotations
<TelerikForm Model="@TeamMate" @ref="@FormRef" Width="300px">
<FormValidation>
<DataAnnotationsValidator />
</FormValidation>
</TelerikForm>
@code {
private TelerikForm FormRef { get; set; }
private Employee TeamMate { get; set; } = new();
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
FormRef?.EditContext.Validate();
}
base.OnAfterRender(firstRender);
}
public class Employee
{
[Display(AutoGenerateField = false)]
public int Id { get; set; }
[Required]
[MinLength(2, ErrorMessage = "{0} should be at least {1} characters.")]
public string Name { get; set; }
[Required]
public DateTime? BirthDate { get; set; }
}
}