Form.Item多个表单

关键的点

• 里面嵌套
• 并且把 label放在外层的中
• 一个 Form.Item内不能有两个 getDecorators

一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，
当有多个被装饰过的 child 时，help，required，validateStatus 无法自动生成

form4x

form3x

export const itemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const { Item } = Form;
<Form {...itemLayout}>
  <Item label='新增链接'>
    <div  className='flex'>
      <Item className='mb0 flex1'>
        {getFieldDecorator('link', {
          initialValue: value.link,
        })(<Input placeholder='请输入链接名称' />)}
      </Item>
      <Item className='mb0 ml8 flex1'>
        {getFieldDecorator('url', {
          initialValue: value.url,
          rules: [{required: true, type: 'url', message: '请输入url'}],
        })(<Input placeholder='请输入链接地址' />)}
      </Item>
    </div>
  </Item>
</Form>

antd提供了validateStatus，help，hasFeedback 等属性，
你可以不需要使用 Form.create 和 getFieldDecorator，自己定义校验的时机和内容。

• validateStatus: 校验状态，可选 ‘success’, ‘warning’, ‘error’, ‘validating’。
• hasFeedback：用于给输入框添加反馈图标。
• help：设置校验文案。

错误的写法

<Form.Item label="准确度">
  {getFieldDecorator("min", {})(<Input placeholder="最小值" />)}
  ~
  {getFieldDecorator("max", {})(<Input placeholder="最大值" />)}
</Form.Item>

type=’hidden’ 隐藏表单

https://github.com/ant-design/ant-design/issues/19784

<Form.Item name="id">
  <Input type="hidden" />
</Form.Item>