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']]}

  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值