antd form初始化initialValues时,改变某一个值

5 篇文章 0 订阅

form中正常的初始化值,可以

1. 直接修改对应的值,比如

<Form form={form} initialValues={{remember: false, account: account}} onFinish={onFinish}></Form>```

```xml
<Form form={form} initialValues={{['security']: uuid(32, 16)}}></Form>

2. 编辑时候,如果有数据且数据格式需要改变,比如

  <Form 
  	form={form}
    initialValues={isUpdate ? { ...selectedUser, ['roleCode']: selectedUser.roleCode.split(',') } : { roleCode: 'default' }}></Form>
       
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd Form 组件中,可以通过 `initialValues` 属性来设置表单的初始。同,可以通过在表单项的 `rules` 属性中设置自定义校验规则,来动态显示或隐藏某些表单项。 例如,我们有一个表单,其中有两个输入框,分别是用户名和密码。根据用户名的是否为 `admin`,我们要动态显示或隐藏一个额外的输入框。代码如下: ```jsx <Form initialValues={{ username: '', password: '', extra: '' }} > <Form.Item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名' }]} > <Input /> </Form.Item> <Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码' }]} > <Input.Password /> </Form.Item> <Form.Item label="附加信息" name="extra" rules={[ ({ getFieldValue }) => ({ validator(_, value) { if (getFieldValue('username') === 'admin') { if (value) { return Promise.resolve(); } return Promise.reject(new Error('请输入附加信息')); } return Promise.resolve(); }, }), ]} style={{ display: 'none' }} > <Input /> </Form.Item> </Form> ``` 在上述代码中,我们在表单的 `initialValues` 属性中设置了表单的初始,在附加信息输入框的 `rules` 属性中设置了一个自定义校验规则,该规则会根据用户名的是否为 `admin` 来动态显示或隐藏该输入框。具体来说,当用户名的为 `admin` ,该输入框会被显示,否则会被隐藏。 在输入框的 `style` 属性中,我们将该输入框的显示样式设置为 `display: none`,表示初始该输入框是隐藏的。当用户名的为 `admin` ,由于校验规则的变化,该输入框会被显示。 需要注意的是,当该输入框被显示,用户输入的也会被提交到后台,因此在后台处理需要注意该输入框的是否合法。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值