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

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.

Access methods on the form by using the @ref of the form.

There are three layout for form: FormLayout.Horizontal, FormLayout.Vertical, FormLayout.Inline.

Set the component size for any Ant Design inputs used in the form.

Set a form item as required or optional using the RequiredMark property.

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>. This causes the grid layout to 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 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, reference the official Blazor documentation: 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, the form's submit button is in the modal, outside of the Form component. You can use Form.Submit to submit the form. We recommend using the native submit input by using <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.

A form's set of FormItem can be automatically generated by the TModel type. This currently supports automatic generation for string, DateTime, number, and enum type members. A member can be marked as required or optional by 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.

The grid used for forms can be customized either on the form itself or a FormItem using the LabelCol or WrapperCol properties.

The form supports two validation modes:

• Attribute: Add validation rules by decorating the model class with validation attributes.

  Scenarios:

  • When you want to share validation rules between the model and APIs, consistent with server-side model validation.
  • When you need to use or implement custom ValidationAttribute for custom validation logic.

• Rules: Add validation rules via the Rules property on FormItem.

  Scenarios:

  • When you want to reuse a model class but need different validation rules for different forms, avoiding the need to create multiple similar model classes.
  • The FormValidationRule type allows for more flexible and rich validation, such as limiting enum values, specifying allowed values, validating child properties, or using a specific ValidationAttribute.

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.