Basic Form data control. Includes layout, initial values, validation and submit.

Get form ref with @ref.

Form supports .NET 8's static server-side rendered form validation with the following limitations:

1. The Name parameter of Form component must be set. Method and Enhance can also be set. (corresponding to the EditForm's FormName, Method, and Enhance)
2. The property binding of the Form component must use Model.Field, not @context.Field.
3. The bound Model instance needs to be marked with the [SupplyParameterFromForm] feature. If there are multiple forms, the FormName parameter must be consistent with the Name of the Form.

Notice:

1. Due to the loss of interactivity in static pages, the supported components are limited to Input, InputPassword, TextArea, Checkbox, Radio, and Upload using InputFile. For other input components, please use native html elements instead, and contributions are also welcome.
2. Since the EditForm is encapsulated inside the Form component, So the Antiforgery will be the default enabled, To cancel, please refer to the documentation.

There are three layout for form: horizontal, vertical, inline.

Switch required or optional style with RequiredMark.

Set component size, only works for antd components.

This demonstrates the use of multiple elements within a FormItem.

Three typical scenarios are shown here.

• Username: there is a description text or other component behind the input box, within FormItem only the component that uses @bind-Value will be bound to the FormItem, other components can be added at will.
• Address: there are two controls, use two <FormItem NoStyle /> within the FormItem to bind the corresponding controls separately (only one control with @bind-Value can appear under a FormItem), use NoStyle for the FormItem, then The Grid layout of the FormItem will be ignored, even if LabelCol or WrapperCol is actively used.

The scenario also shows complex types of form validation. The Address property is a type that contains two properties. When a cascading form entry binds its property, it inherits all attributes of that property, but because the form does not bind this property, the external form cannot obtain Required and Label.

• BirthDate: there are two inline controls with error messages displayed under each control, using two <FormItem />s to bind the corresponding controls separately, and modifying the style to make the layout inline.

For a more complex way of wrapping and reusing controls see Custom Form Controls below.

Customized or third-party form controls can be used in Form, too. Controls must follow these conventions:

• Inherits AntInputComponentBase
• Assign value to [CurrentValue] instead of [Value]([CurrentValue] and [Value] are from AntInputComponentBase)

Price:

public class Price
{
    public int Number { get; set; }
    public string Currency { get; set; }
}

PriceInput.razor:

@namespace AntDesign.Docs
@inherits AntInputComponentBase<Price>

<span>
    <Input @bind-Value="@Value.Number"
           style="width: 100px" />
  
    <RadioGroup @bind-Value="@Value.Currency"
                style="width: 280px; margin: 0 8px">
        <Radio RadioButton Value=@("rmb")>RMB</Radio>
        <Radio RadioButton Value=@("dollar")>Dollar</Radio>
    </RadioGroup>
</span>

Support using table as form component and validate cell edit.

Check if the form has been modified by using IForm.IsModified.

Setting a custom validator using the Form Validator property or the <Validator> element overrides the built-in validator. When validation is not required, it can be set to NULL to improve performance.

Note: When using the <Validator> element to set the validator, you need to wrap the other components within the Form with <ChildContent>.

For custom validator development, see document: ASP.NET Core Blazor forms and validation - Validator components

Default will try to get the error message templates from the built-in globalization resource file,, which can be replaced by the Locale parameter. It can also be modified by the ErrorMessage of the data declaration feature and the Message of the Rules parameter.

Otherwise, also supports the DataAnnotations localization of Blazor forms. When FormItem.Label is not specified, it is automatically obtained from DisplayAttribute or DisplayNameAttribute.

Use FormProvider to process data between forms. In this case, submit button is in the Modal which is out of Form. You can use form.Submit to submit form. Besides, we recommend native <Button HtmlType="submit" /> to submit a form.

Three columns layout is often used for advanced searching of data table.

Because the width of label is not fixed, you may need to adjust it by customizing its style.

Use FormItem.Name to binding model properties dynamically, supporting both object and dictionary models.

If you bind a dictionary, you don't have to define properties in advance, so you can easily implement dynamic forms.

FormItem can be automatically generated by the 'TModel' type. currently supports automatic generation for string, DateTime, number, and enum type members. Whether a member is required or not is controlled based on its nullability.

Notice: This feature is in iteration, and incompatible changes may occur in subsequent releases.

(v0.5+) Validation is turned off by default for performance reasons. Validate only when form.Validate () is called. It would be enabled by setting the 'ValidateOnChange' parameter.

Form validation mode, including: default, Rules, mixed.

You can use the Rules mode to attach validationAttributes directly to the FormItem, Applicable scenario: The model class needs to be reused, but different pages have different validation Rules. The Rules mode can avoid creating multiple similar model classes repeatedly

Perform different check rules according to different situations.

We provide properties like validateStatus help hasFeedback to customize your own validate status and message, without using Form.

1. validateStatus: validate status of form components which could be 'success', 'warning', 'error', 'validating'.
2. hasFeedback: display feed icon of input control
3. help: display validate message.

Show field level error indicator if a field is invalid. This indicator will show when the form validates.

You can set validation messages at any time.