Defines a form field.

The Field component sets the provided field name into the context so child components like input fields and labels can retrieve it and use it as the default field.

API

• [ ] colon: Configure the default value of colon for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal) boolean true
• [ ] component: Set the Form rendering element. Do not create a DOM node for false ComponentType | false form
• [ ] fields: Control of form fields through state management (such as redux). Not recommended for non-strong demand. View example FieldData[] -
• [ ] form: Form control instance created by Form.useForm(). Automatically created when not provided FormInstance -
• [ ] initialValues: Set value by Form initialization or reset object -
• [ ] labelAlign: The text align of label of all items left | right right
• [ ] labelCol: Label layout, like <Col> component. Set span offset value like {span: 3, offset: 12} or sm: {span: 3, offset: 12} object -
• [ ] layout: Form layout horizontal | vertical | inline horizontal
• [ ] name: Form name. Will be the prefix of Field id string -
• [ ] preserve: Keep field value even when field removed boolean true 4.4.0
• [ ] requiredMark: Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config boolean | optional true 4.6.0
• [ ] scrollToFirstError: Auto scroll to first failed field when submit boolean false
• [ ] size: Set field component size (antd components only) small | middle | large -
• [ ] validateMessages: Validation prompt template, description see below ValidateMessages -
• [ ] validateTrigger: Config field validate trigger string | string[] onChange 4.3.0
• [ ] wrapperCol: The layout for input controls, same as labelCol object -
• [ ] onFieldsChange: Trigger when field updated function(changedFields, allFields) -
• [ ] onFinish: Trigger after submitting the form and verifying data successfully function(values) -
• [ ] onFinishFailed: Trigger after submitting the form and verifying data failed function({ values, errorFields, outOfDate }) -
• [ ] onValuesChange: Trigger when value updated

Example

<Form

name="basic"
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}

<Form.Item
  label="Username"
  name="username"
  rules={[{ required: true, message: 'Please input your username!' }]}
>
  <Input />
</Form.Item>

<Form.Item
  label="Password"
  name="password"
  rules={[{ required: true, message: 'Please input your password!' }]}
>
  <Input.Password />
</Form.Item>

<Form.Item name="remember" valuePropName="checked">
  <Checkbox>Remember me</Checkbox>
</Form.Item>

<Form.Item>
  <Button type="primary" htmlType="submit">
    Submit
  </Button>
</Form.Item>

Properties

• name :atom, required: true - The field name.
• class :css_class - The CSS class for the generated <div> element.