ProFormDependency - Data Linkage

Data linkage in Form is very common, so we encapsulate a component for data processing.

ProFormDependency

ProFormDependency is a simplified version of Form.Item. It has noStyle and shouldUpdate built in by default. We only need to configure the name to determine which data we rely on. ProFormDependency will automatically process the diff and extract the corresponding value from the form.

The name parameter must be an array. If it is a nested structure, it can be configured like name={['name', ['name2', 'text']]}. The value of the configured name will be passed in renderProps . name={['name', ['name2', 'text']]} The value of the passed in values is { name: string,name2: { text:string } }.

<ProFormDependency name={['name']}>
  {({ name }) => {
    return (
      <ProFormSelect
        options={[
          {
            value: 'chapter',
            label: 'It will take effect after stamping',
          },
        ]}
        width="md"
        name="useMode"
        label={`The contract with "${name}" agreed on the effective method`}
      />
    );
  }}
</ProFormDependency>

Examples

Interdependent fields

ProFormDependency

import {
  ProForm,
  ProFormDependency,
  ProFormList,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';

const Demo = () => {
  return (
    <ProForm name="dependency-demo">
      <ProFormSelect
        options={[
          {
            value: 'select',
            label: '选择框',
          },
          {
            value: 'input',
            label: '输入框',
          },
        ]}
        width="xs"
        name="globalUseMode"
        label="全局生效方式组件的类型"
      />
      <ProFormList
        name={['default', 'users']}
        label="用户信息"
        initialValue={[
          {
            name: '1111',
          },
        ]}
        alwaysShowItemLabel
      >
        <ProForm.Group key="group">
          <ProFormSelect
            options={[
              {
                value: 'select',
                label: '选择框',
              },
              {
                value: 'input',
                label: '输入框',
              },
            ]}
            width="xs"
            name="useMode"
            label="生效方式组件的类型"
          />
          <ProFormDependency name={['useMode']}>
            {({ useMode }) => {
              if (useMode === 'select') {
                return (
                  <ProFormSelect
                    options={[
                      {
                        value: 'chapter',
                        label: '盖章后生效',
                      },
                    ]}
                    width="md"
                    name="function"
                    label="生效方式"
                  />
                );
              }
              return (
                <ProFormText width="md" name="function" label="生效方式" />
              );
            }}
          </ProFormDependency>

          <ProFormDependency
            key="globalUseMode"
            name={['globalUseMode']}
            ignoreFormListField
          >
            {({ globalUseMode }) => {
              if (globalUseMode === 'select') {
                return (
                  <ProFormSelect
                    options={[
                      {
                        value: 'chapter',
                        label: '盖章后生效',
                      },
                    ]}
                    width="md"
                    name="gfunction"
                    label="外层联动生效方式"
                  />
                );
              }
              return (
                <ProFormText
                  width="md"
                  name="gfunction"
                  label="外层联动生效方式"
                />
              );
            }}
          </ProFormDependency>
        </ProForm.Group>
      </ProFormList>
    </ProForm>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Inside ProFormList

The examples below clarify evaluation order inside or outside lists:

<ProFormDependency> not nested in <ProFormList>: values come from global form paths (scenario 1)
Nested under <ProFormList>
- ignoreFormListField={true}: still read globals (scenario 2)
- ignoreFormListField={false}: scoped to row context (scenario 3)

c.a

c.b

c.c.a

c.d

搜集依赖值（情形3） <ProFormDependency name={["a","b",["c","a"]]}>

{
  "c": {
    "d": [
      {
        "a": 6,
        "b": 7,
        "c": {}
      }
    ]
  },
  "a": 6,
  "b": 7
}

a, b, c.a取自局部

c.e

搜集依赖值（情形2) <ProFormDependency name={["a","b",["c","a"]]} ignoreFormListField>

{"a":1,"b":2,"c":{"a":3}}

a, b, c.a取自全局

收集依赖值（情形1) <ProFormDependency name={["a","b",["c","a"],["c","b"],["c","c","a"],["c","d"],["c","e"]]}>

{"a":1,"b":2,"c":{"a":3,"b":4,"c":{"a":5},"d":[{"a":6,"b":7}],"e":[{"a":8,"b":9}]}}

Scoped dependencies

import {
  ProForm,
  ProFormDependency,
  ProFormGroup,
  ProFormList,
  ProFormText,
} from '@ant-design/pro-components';
import { Form } from 'antd';
import type { NamePath } from '../../../src/utils/antdTypes';

const Demo = () => {
  const initialValues = {
    a: 1,
    b: 2,
    c: {
      a: 3,
      b: 4,
      c: {
        a: 5,
      },
      d: [{ a: 6, b: 7 }],
      e: [{ a: 8, b: 9 }],
    },
  };
  const depName1: NamePath[] = [
    'a',
    'b',
    ['c', 'a'],
    ['c', 'b'],
    ['c', 'c', 'a'],
    ['c', 'd'],
    ['c', 'e'],
  ];
  const depName2: NamePath[] = ['a', 'b', ['c', 'a']];
  const depName3: NamePath[] = ['a', 'b', ['c', 'a']];
  return (
    <ProForm name="dependency2-demo" initialValues={initialValues}>
      <ProFormGroup>
        <ProFormText name="a" label="a" />
        <ProFormText name="b" label="b" />
        <ProFormText name={['c', 'a']} label="c.a" />
        <ProFormText name={['c', 'b']} label="c.b" />
        <ProFormText name={['c', 'c', 'a']} label="c.c.a" />
        <ProFormGroup title="c.d">
          <ProFormList name={['c', 'd']}>
            <ProFormGroup key="group">
              <ProFormText name="a" label="a" />
              <ProFormText name="b" label="b" />
              <ProFormDependency name={depName3}>
                {(depValues) => (
                  <Form.Item
                    label={`搜集依赖值（情形3） <ProFormDependency name={${JSON.stringify(
                      depName3,
                    )}}>`}
                    extra="a, b, c.a取自局部"
                  >
                    <pre>
                      <code>{JSON.stringify(depValues, null, 2)}</code>
                    </pre>
                  </Form.Item>
                )}
              </ProFormDependency>
            </ProFormGroup>
          </ProFormList>
        </ProFormGroup>
        <ProFormGroup title="c.e">
          <ProFormList name={['c', 'e']}>
            <ProFormGroup key="group">
              <ProFormText name="a" label="a" />
              <ProFormText name="b" label="b" />
              <ProFormDependency name={depName2} ignoreFormListField>
                {(depValues) => (
                  <Form.Item
                    label={`搜集依赖值（情形2) <ProFormDependency name={${JSON.stringify(
                      depName2,
                    )}} ignoreFormListField>`}
                    extra="a, b, c.a取自全局"
                  >
                    <pre>
                      <code>{JSON.stringify(depValues)}</code>
                    </pre>
                  </Form.Item>
                )}
              </ProFormDependency>
            </ProFormGroup>
          </ProFormList>
        </ProFormGroup>
      </ProFormGroup>
      <ProFormGroup
        title={`收集依赖值（情形1) <ProFormDependency name={${JSON.stringify(
          depName1,
        )}}>`}
      >
        <ProFormDependency name={depName1}>
          {(depValues) => (
            <pre>
              <code>{JSON.stringify(depValues)}</code>
            </pre>
          )}
        </ProFormDependency>
      </ProFormGroup>
    </ProForm>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

#ProFormDependency - Data Linkage