Form.Item的name为数组时,设置某个字段的值。Form.List的使用

设置Form.Item的值

Form.Item的name可以为字符串或数组,例如后端接收的数据格式为

{

userName: 'lx',

base_range:

{

company_base_range_start: 1,

company_base_range_end: 2

}},可以使用数组。

 1.设置Form.Item name为数组的值,form.setFieldValue(['base_range','company_base_range_end'], 20)

2.设置Form.Item name为字符串的值,form.setFieldValue('userName', 'lx')

 <Form form={form} onFinish={onFinish}>
            <Form.Item name='userName' label='用户名'>
              <Input />
            </Form.Item>
            <Form.Item label='范围' {...shortLayout} className='label__required'>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <Form.Item
                    name={['base_range', 'company_base_range_start']}
                    dependencies={[['base_range', 'company_base_range_end']]}
                    rules={[
                      { required: true, message: '请输入下限' },
                      {
                        validator: (_, value) =>
                          validateMoneyRule(value,                             
                          base_range?.company_base_range_end)
                      }
                    ]}
                    style={{ display: 'inline-block', width: 'calc(50% - 15px)' }}
                  >
                    <InputNumber
                      controls={false}
                      placeholder='下限'
                      addonAfter='元'
                      style={{ width: '100%' }}
                    />
                  </Form.Item>
                  <span style={{ margin: '0 10px 24px' }}>—</span>
                  <Form.Item
                    name={['base_range', 'company_base_range_end']}
                    rules={[
                      { required: true, message: '请输入上限' },
                      {
                        validator: (_, value) => validateMoneyRule(value)
                      }
                    ]}
                    style={{ display: 'inline-block', width: 'calc(50% - 15px)' }}
                  >
                    <InputNumber
                      controls={false}
                      placeholder='上限'
                      addonAfter='元'
                      style={{ width: '100%' }}
                    />
                  </Form.Item>
                </div>
              </Form.Item>
          </Form>

设置Form.List的某个字段的值

form.setFieldValue(['account_info', index, 'id'], undefined)

 <Form.List name='account_info' initialValue={[{}, {}, {}, {}]}>
          {(fields) => (
            <>
              {fields.map(({ key, name }, index) => (
                <div key={key}>
                  <Row>
                    <Col span={1} />
                    <Col span={5}>
                      <Form.Item name={[name, `scene`]} {...noLabelLayout} valuePropName='checked'>
                        <Checkbox
                          disabled={!!subjectScene?.[index]?.scene}
                          onChange={() => {
                            form.setFieldValue(['account_info', index, 'id'], undefined)
                          }}
                        >
                          {sceneList[index]}
                        </Checkbox>
                      </Form.Item>
                    </Col>
                    <Col span={17}>
                      <Form.Item
                        name={[name, 'id']}
                        {...noLabelLayout}
                        rules={[{ required: account_info?.[index]?.scene, message: '请选择账户' }]}
                      >
                        <BankAccountSelect
                          placeholder='请选择'
                          disabled={!!subjectScene?.[index]?.scene || !account_info?.[index]?.scene}
                          subject_id={subjectObject?.key}
                          open_status={1}
                          style={{ width: '100%' }}
                        />
                      </Form.Item>
                    </Col>
                  </Row>
                </div>
              ))}
            </>
          )}
        </Form.List>

  • 6
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 antd Form.List 中,一个 Form.Item 可以通过使用 getFieldDecorator 方法来获取自身的,而获取其他 Form.Item则需要通过 Form.List 的方法进行。例如,可以通过调用 form.getFieldValue 方法来获取其他 Form.Item。具体实现步骤如下: 1. 在 Form.List 中,给每个 Form.Item 一个唯一的 name 属性,例如 name={`items[${index}].name`},其中 index 为当前 Form.Item 的索引。 2. 在 getFieldDecorator 方法中,使用 getFieldValue 方法来获取其他 Form.Item。示例代码如下: ```jsx {getFieldDecorator(`items[${index}].name`, { initialValue: item.name, rules: [{ required: true, message: 'Please input name' }], })( <Input placeholder="Enter name" /> )} {getFieldDecorator(`items[${index}].age`, { initialValue: item.age, rules: [{ required: true, message: 'Please input age' }], })( <InputNumber placeholder="Enter age" min={0} /> )} {getFieldDecorator(`items[${index}].email`, { initialValue: item.email, rules: [{ required: true, message: 'Please input email' }], })( <Input placeholder="Enter email" /> )} ``` 3. 在需要获取其他 Form.Item 的地方,调用 form.getFieldValue 方法。示例代码如下: ```jsx const handleSubmit = e => { e.preventDefault(); form.validateFields((err, values) => { if (!err) { // 获取其他 Form.Item const names = form.getFieldValue('items').map(item => item.name); console.log(names); // 提交表单 console.log('Received values of form: ', values); } }); }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值