antd form.getFieldsValue(true)用法

在组件中手动推入一个自定义属性,该属性不归form实例统一管理,

form.setFieldsValue({ isWarn: true })

form表单的组件区域B

 const { a, b } = res || {}
 if (a && b) {
   form.setFieldsValue({ isWarn: true })
 } else {
   form.setFieldsValue({ isWarn: false })
 }

因为不归form统一管理,使用form.getFieldsValue()获取属性时,需要传入一个true值,才能显示自定义属性

form表单的组件区域A

<Form.Item
	name={['sinkTable', 'allInfo']}
	label="表名"
	rules={
	  [
		() => ({
		  validator() {
		    const { isWarn } = form.getFieldsValue(true)
		    if (isWarn) {
		      return Promise.reject(new Error('警告提示'))
		    }
		    return Promise.resolve()
		  },
		}),
	  ]
	}
>
/*忽略内容*/
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
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; ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你脸上有BUG

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值