antd form.Item嵌套添加rules

  • formItem嵌套使用,使用rules的正确用法,需要在外层formItem然后在里层formItem添加required属性,在里层form.item添加rules即可
  • 外层form.item没有添加的required时候,没有必填标识
<Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
   <Form.Item label={'label'} wrapperCol={{ span: 16, offset: 1 }}>
     <Form.Item
       wrapperCol={{ span: 24 }}
       name="name"
       rules={[{ required: true, message: 'errorInfo' }]}
     >
       <div>这是一个div</div>
     </Form.Item>
     <div>这是另一个div</div>
   </Form.Item>
 </Form>

在这里插入图片描述

  • 外层form.item添加的required时候,有必填标识
<Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
   <Form.Item label={'label'} wrapperCol={{ span: 16, offset: 1 }} required>
     <Form.Item
       wrapperCol={{ span: 24 }}
       name="name"
       rules={[{ required: true, message: 'errorInfo' }]}
     >
       <div>这是一个div</div>
     </Form.Item>
     <div>这是另一个div</div>
   </Form.Item>
 </Form>

在这里插入图片描述

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
antdForm组件中可以使用List组件进行嵌套使用,实现动态添加表单项的效果。 具体使用方法如下: 1. 在Form组件中使用List组件作为表单项的容器,设置name属性为需要动态添加的表单项的字段名。 2. 在List组件中使用FormItem组件作为每个表单项的容器,设置name属性为表单项的字段名。 3. 在FormItem组件中使用对应的antd表单控件,如Input、Select等,设置name属性为表单项的字段名。 4. 在List组件中使用Button组件作为添加按钮,设置onClick事件为添加表单项的方法。 5. 在添加表单项的方法中,使用Form组件的setFieldsValue方法更新表单数据,添加新的表单项。 6. 在List组件中使用Button组件作为删除按钮,设置onClick事件为删除表单项的方法。 7. 在删除表单项的方法中,使用Form组件的setFieldsValue方法更新表单数据,删除对应的表单项。 示例代码如下: ``` import { Form, Input, Select, Button, List } from 'antd'; const { Option } = Select; const Demo = () => { const [form] = Form.useForm(); const onFinish = (values) => { console.log(values); }; const addFormItem = () => { const { list } = form.getFieldsValue(); const nextList = [...list, { name: '', age: '', gender: '' }]; form.setFieldsValue({ list: nextList }); }; const removeFormItem = (index) => { const { list } = form.getFieldsValue(); const nextList = [...list]; nextList.splice(index, 1); form.setFieldsValue({ list: nextList }); }; return ( <Form form={form} onFinish={onFinish}> <List name="list"> {(fields, { add, remove }) => ( <> {fields.map((field, index) => ( <Form.Item key={field.key} name={[field.name, 'name']} fieldKey={[field.fieldKey, 'name']} rules={[{ required: true, message: '请输入姓名' }]} > <Input placeholder="姓名" /> </Form.Item> <Form.Item key={field.key} name={[field.name, 'age']} fieldKey={[field.fieldKey, 'age']} rules={[{ required: true, message: '请输入年龄' }]} > <Input placeholder="年龄" /> </Form.Item> <Form.Item key={field.key} name={[field.name, 'gender']} fieldKey={[field.fieldKey, 'gender']} rules={[{ required: true, message: '请选择性别' }]} > <Select placeholder="性别"> <Option value="male">男</Option> <Option value="female">女</Option> </Select> </Form.Item> <Button onClick={() => removeFormItem(index)}>删除</Button> ))} <Button onClick={() => addFormItem()}>添加</Button> </> )} </List> <Button htmlType="submit">提交</Button> </Form> ); }; export default Demo; ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值