antd dependencies使用

dependencies主要用于规则校验,它所依赖的字段更新时,该字段将自动触发更新与校验。例如用户名和密码相互校验。

Form.Item的name为字符串时的dependencies

dependencies={['year_average']}

        <Row>
          <Col span={24}>
            <Form.Item
              label='月社平工资'
              name='month_average'
              className='label__required'
              dependencies={['year_average']}
              rules={[
                {
                  validator: (_, value) =>
                    validateRule(
                      value,
                      '请输入月社平工资',
                      value,
                      year_average,
                      '年社平工资需大于月社平工资'
                    )
                }
              ]}
            >
              <InputNumber
                controls={false}
                placeholder='请输入月社平工资'
                addonAfter='元'
                style={
  { width: '100%' }}
              />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              label='年社平工资'
              name='year_average'
              className='label__required'
              rules={[
                {
                  validator: (_, value) => validateRule(value, '请输入年社平工资')
                }
              ]}
            >
              <InputNumber
                controls={false}
                placeholder='请输入年社平工资'
                addonAfter='元'
                style={
  { width: '100%' }}
              />
            </Form.Item>
          </Col>
        </Row>

Form.Item的name为数组时的dependencies

dependencies={[['payment_amount_range', 'company_payment_range_end']]}

          <Form.Item label='范围' {...shortLayout}>
              <div style={
  { display: 'flex', alignItems: 'center' }}>
                <Form.Item
                  name={['payment_amount_range', 'company_payment_range_start']}
                  dependencies={[['payment_amount_range', 'company_payment_range_end']]}
                  rules={[
                    {
                      required:
                        !!payment_amount_range?.company_payment_range_end ||
                        payment_amount_range?.company_payment_range_end === 0,
                      message: '请输入下限'
                    },
                    {
                      validator: (_, value) =>
                        validateMoneyRule(value, payment_amount_range?.company_payment_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={['payment_amount_range', 'company_payment_range_end']}
                  rules={[
                    {
                      required:
                        !!payment_amount_range?.company_payment_range_start ||
                        payment_amount_range?.company_payment_range_start === 0,
                      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.List的dependencies

dependencies={[['users', index, 'name']]}

相关推荐

  1. conda使用,pip使用

    2024-02-21 01:04:03       58 阅读
  2. VueUse使用

    2024-02-21 01:04:03       69 阅读
  3. Git<span style='color:red;'>使用</span>

    Git使用

    2024-02-21 01:04:03      60 阅读
  4. netty使用

    2024-02-21 01:04:03       56 阅读
  5. gdb<span style='color:red;'>使用</span>

    gdb使用

    2024-02-21 01:04:03      63 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-21 01:04:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-21 01:04:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-02-21 01:04:03       87 阅读
  4. Python语言-面向对象

    2024-02-21 01:04:03       96 阅读

热门阅读

  1. day3 2/20

    day3 2/20

    2024-02-21 01:04:03      46 阅读
  2. git----->git pull和git fetch区别

    2024-02-21 01:04:03       46 阅读
  3. vue3+ts实现表格的增删改查(一)

    2024-02-21 01:04:03       50 阅读
  4. 我的创作纪念日

    2024-02-21 01:04:03       54 阅读
  5. 前端开发框架推荐总结二

    2024-02-21 01:04:03       42 阅读
  6. Nginx是什么?怎么用?

    2024-02-21 01:04:03       59 阅读
  7. rust-learn

    2024-02-21 01:04:03       52 阅读
  8. 数据结构——时间复杂度

    2024-02-21 01:04:03       51 阅读
  9. 【前端】Vue中引入excel模板并下载以及XLSX使用

    2024-02-21 01:04:03       49 阅读
  10. KeepAlived搭建高可用的HAproxy负载均衡集群系统

    2024-02-21 01:04:03       56 阅读
  11. 有一台阿里云轻量应用服务器可以用来做什么?

    2024-02-21 01:04:03       70 阅读
  12. linux部署File Browser文件管理系统

    2024-02-21 01:04:03       44 阅读