ant design中的Form.List 如何支持dependencies

1、单个

官网例子:打开
需要注意区分shouldUpdate

2、多个Form.List

<Form name="dynamic_form_nest_item" onFinish={ onFinish } autoComplete="off">
  <Form.List name="users">
    { ( fields, { add, remove } ) => (
      <>
        { fields.map( ( field ) => (
          <Space
            key={ field.key }
            style={ { display: "flex", marginBottom: 8 } }
            align="baseline"
          >
            <Form.Item
              { ...field }
              name={ [ field.name, "name" ] }
              fieldKey={ [ field.fieldKey, "name" ] }
              dependencies={[["users", 0, "age"]]}

              rules={ [
                {
                  required: true,
                  message: "name"
                }
              ] }
            >
              <Input placeholder="Name"/>
            </Form.Item>
            <Form.Item
              { ...field }
              name={ [ field.name, "age" ] }
              fieldKey={ [ field.fieldKey, "age" ] }
              dependencies={[["users", 0, "name"]]}
              rules={ [
                {
                  required: true,
                  message: "age"
                },
                ( { getFieldValue } ) => ( {
                  validator( _, value ) {
                    console.log( "name" );
                    if (
                      !value ||
                      getFieldValue( "users" )[field.fieldKey].name.length <
                      value.length
                    ) {
                      return Promise.resolve();
                    }

                    return Promise.reject(
                      "the length of the name is less than the length of the age"
                    );
                  }
                } )
              ] }
            >
              <Input placeholder="age"/>
            </Form.Item>
            <MinusCircleOutlined onClick={ () => remove( field.name ) }/>
          </Space>
        ) ) }
        <Form.Item>
          <Button
            type="dashed"
            onClick={ () => add() }
            block
            icon={ <PlusOutlined/> }
          >
            Add field
          </Button>
        </Form.Item>
      </>
    ) }
  </Form.List>
</Form>
  • 解释:

dependencies={[["users", 0, "name"]]}
users:Form.List的name
0:第几行
name:依赖的参数

参考链接:在线demo
链接1、来自github的issues
链接2、https://ant.design/components/form-cn/#dependencies

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值