When you need to create an instance or collect information.
When you need to validate fields in certain rules.

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

Call form method with Form.useForm.

Note that useForm is a React Hooks that only works in functional component.

We recommend use Form.useForm to create data control. If you are using class component, you can get it by ref.

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

Switch required or optional style with requiredMark.

Add or remove form items dynamically. add function support config initial value.

Nest dynamic field need extends field. Pass field.name and field.fieldKey to nest item.

This example demonstrates the case that a form contains multiple form controls.

name prop support nest data structure. Customize validate message template with validateMessages or message. Ref here about message template.

This demo show how to use Form.Item with multiple controls. <Form.Item name="field" /> will only bind control(Input/Select) which is the only children of it. Image this case, you add some text description after Input, then you have to wrap Input by a extra <Form.Item name="field">. style property of Form.Item/ could be useful to modify the nested form item layout, or <Form.Item noStyle /> turn it into a pure form bind component(like getFieldDecorator in 3.x).

- <Form.Item label="Field" name="field">
-   <Input />
- </Form.Item>
+ <Form.Item label="Field">
+   <Form.Item name="field" noStyle><Input /></Form.Item> // that will bind input
+   <span>description</span>
+ </Form.Item>

This demo show three typical usages:• Username: extra elements after control, using <Form.Item name="field" noStyle /> inside Form.Item to bind Input.• Address: two controls in one line, using two <Form.Item name="field" noStyle /> to bind each control.• BirthDate：two controls in one line with indeptent error message, using two <Form.Item name="field" noStyle /> to bind each control, make layout inline by customizing style property.

Note, in this case, no more name property should be left in Form.Item with label.

See Customized Form Controls demo below for further advanced usage.

Customized or third-party form controls can be used in Form, too. Controls must follow these conventions:
It has a controlled property value or other name which is equal to the value of valuePropName.
It has event onChange or an event which name is equal to the value of trigger.

We can store form data into upper component or Redux or dva by using onFieldsChange and fields, see more at this rc-field-form demo.
Note: Save Form data globally is not a good practice. You should avoid this if not necessary.

[
  {
    "name": [
      "username"
    ],
    "value": "Store value"
  }
]

Use Form.Provider 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.

Inline login form is often used in navigation bar.

Normal login form which can contain more elements.

Fill in this form to create a new account for you.

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.

When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fill in the form to create an item.

The value of time-related components is a moment object, which we need to pre-process it before we submit to server.

Form will collect and validate form data automatically. But if you don't need this feature or the default behavior cannot satisfy your business, you can handle form data manually.

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.

Perform different check rules according to different situations

Demonstration of validation configuration for form controls which are not shown in the demos above.