如何使 Ant 设计表单列表成为必需？答案

【问题标题】：How to make Ant design's Form List required?如何使 Ant 设计表单列表成为必需？
【发布时间】：2020-07-20 12:08:56
【问题描述】：

我正在使用 Ant-design 库的 Form 组件，我想让 Categories 字段像 Name 字段一样需要，我该如何实现？我尝试了以下方法，但没有成功。

<Form>
  <Form.Item label="Name" rules={[{ required: true, message: "This field is required" }]}>
    <Input />
  </Form.Item>

  <Form.Item label="Categories" rules={[{ required: true, message: "This field is required" }]}>
    <Form.List>
      {fields => (
        <div>
          {fields.map(field => (
            <Form.Item {...field}>
              <Input />
            </Form.Item>
          ))}
        </div>
      )}
    </Form.List>
  </Form.Item>
</Form>

【问题讨论】：

标签： reactjs antd

【解决方案1】：

这是我的代码，它可以工作

<Form.Item
  {...layout1}
  name="checkPlans"
  label="Plans"
  style={this.state.disableField ? {pointerEvents: 'none'}: ''}
  className='requiredField'
  rules={[
     ({ getFieldValue }) => ({
     validator(rule, value) {
       if (getFieldValue('plans') && getFieldValue('plans').length) {
         return Promise.resolve();
       }
       return Promise.reject('Please add plans');
     },
     }),
  ]}
 >
        <Form.List
          name="plans"
          label="Plans"
        >
        ...

        </Form.List>
</Form.Item>

【讨论】：