Blazor Form Overview
The Form Component in Blazor is used for setting up a contact form and/or a registration page that fit in any application's requirements. You can easily provide Blazor form validation, define form orientation, and configure or customize your desired layout as well. The Blazor form component also exposes events that give you the opportunity to respond to user actions.
Blazor Form Example
The following example represents IgbForm
that has some inputs, buttons and a checkbox inside.
Usage
Before using the IgbForm
, you need to register it as follows:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbFormModule));
You will also need to link an additional CSS file to apply the styling to the IgbForm
component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
The simplest way to start using the IgbForm
is as follows:
Form data is collected for the following components:
When a form control is invalid, the form will not be submitted and an error message will be shown. If you want to specify that the form elements should not be validated when the form is submitted you can add the novalidate
attribute to the IgbForm
element:
<IgbForm NoValidate="true" />
Events
The Form component raises the following events:
- Submit - Raised when the form is submitted
- Reset - Raised when the form is reset
Here is an example showing how to add an event listener for the Submit
event:
Methods
The Form component exposes the following methods:
Method | Description |
---|---|
Submit |
Submits the form data. |
Reset |
Resets the form data. |
GetFormData |
Collects the form data and returns a single FormData object. |
ReportValidity |
Returns whether the element's child controls satisfy their validation constraints. |
API References
IgbButton
IgbCheckbox
IgbForm
IgbInput
IgbRadio
Submit