Form.List的使用,设置某个字段的值

1.Form.Item的name

html 复制代码
                <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>

form.item的naem可以为数组或者字符串,当后端接口文档中的字段有相同名字的时候,可以用数组。

dependencies,依赖,一般是校验规则时会用到。

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

html 复制代码
 <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>

3.一行展示form.item

html 复制代码
<Form.Item label='范围' {...shortLayout} className='label__required'>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <Form.Item
                    name={['base_range', 'personal_base_range_start']}
                    dependencies={[['base_range', 'personal_base_range_end']]}
                    rules={[
                      { required: true, message: '请输入下限' },
                      {
                        validator: (_, value) =>
                          validateMoneyRule(value, base_range?.personal_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', 'personal_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>
相关推荐
AskSky3 分钟前
为了搞一个完美的健身APP,我真是费尽心机
前端
斯~内克9 分钟前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
阴阳怪气乌托邦10 分钟前
别再啃OA代码了!低代码"搭积木"式搞数智化,我直接少写500行
前端·低代码
beelan14 分钟前
v-on的思考
前端
山河木马17 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户92724725021917 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平21 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手23 分钟前
大保剑:Promise的有趣体验
javascript
李大玄24 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵24 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom